Rétablissons l’outline

Openweb.eu.org > Articles  > Rétablissons l’outline

Abstract

Un point extrêmement simple à gérer en matière d’accessibilité mais tellement important pour certaines personnes est souvent oublié, ce point s’appelle… la visibilité du focus clavier. Tanguy Loheac et Nicolas Hoffmann vous invitent à vous en souvenir dans un petit article agrémenté d’une vidéo explicative.

Article

De nombreuses personnes ne peuvent utiliser la souris, par exemple en cas de handicap moteur ou simplement n’importe qui… qui voit sa souris sans fil tomber en panne de piles !

Quand on navigue au clavier, un point important est de savoir exactement où l’on se situe dans la page. La touche tabulation permet de parcourir tous les liens de la page et donc de naviguer sur les sites Web.

L’outline est en général une sorte de bordure qui entoure le lien sur lequel le focus clavier se situe.

Voici un exemple sur la page d’accueil d’OpenWeb.

Exemple de focus clavier sur un lien sur OpenWeb

Le problème

De nombreux systèmes dits de « reset CSS » (ou réinitialisation CSS) annulent cette propriété, par exemple :

a, form, input, textarea, select, button, ul, ol, li {
outline-style : none;
outline-color : invert;
outline-width : 0;
}

Ou plus simplement avec outline: 0;.

Autant ne pas prendre de détour : l’annulation de cette propriété rend extrêmement difficile voir impossible de naviguer au clavier sur les sites Web, car il devient impossible de savoir précisément sur quel lien on se situe.

Une première piste d’amélioration

Un premier réflexe à prendre donc est de vérifier que l’outline n’est pas annulé. Il serait aisé de se dire « c’est bon, la propriété n’est pas annulée dans la CSS, donc point traité ! ». Il faut quand même faire quelques petites vérifications supplémentaires !

La couleur de l’outline est déterminée par la couleur du lien. Encore une fois, il serait rapide de se dire « ma couleur de lien est suffisamment contrastée par rapport à la couleur de fond, donc plus de risque ! ».

Prenons un exemple avec cette première page de test. Les liens du bandeau sont en blanc sur fond rouge. L’outline n’est pas annulé, et pourtant il va être très difficile dans ce cas de le voir quand le focus clavier sera sur ces liens.

La raison est simple : l’outline sera bien là autour du lien, mais en blanc… sur fond blanc ! Difficile de le voir dans ce cas. Ce cas peut se présenter par exemple avec une image de fond qui ne s’est pas chargée correctement (dans ce cas, pensez à prévoir une couleur de fond en plus de votre image), ou un simple oubli.

Dans ce second exemple de page de test, un simple fond noir a été appliqué. L’outline est désormais mieux visible.

Offrons mieux

Présupposer de la couleur de fond pour l’outline peut parfois être un calcul risqué ou insuffisant. Et pourtant, avec très peu d’efforts, cela peut être grandement amélioré.

Souvent les liens ont un graphisme en état survolé (hover). Dans ce troisième exemple, le survol de la souris applique une bordure noire et une couleur noire aux liens du bandeau.

#entete li a:hover {
 color: #000;
 border: 2px dashed #000;
 padding-left:5px;
 padding-right: 5px;
}

Il suffit de doubler cette propriété avec le pseudo-état focus, et ainsi le focus clavier sera clairement indiqué à l’internaute.

#entete li a:hover,
#entete li a:active,
#entete li a:focus {
 color: #000;
 border: 2px dashed #000;
 padding-left:5px;
 padding-right: 5px;
}

Peu d’efforts sont à fournir pour le concepteur du site, et vos internautes navigant au clavier vous en seront très reconnaissants, comme vous pourrez le constater dans ce troisième exemple de page de test.

Conclusion et vidéos

En guise de conclusion, nous vous invitons à vérifier que vos liens ne souffrent pas de ce problème, et tant qu’à faire, autant proposer toujours plus de confort à votre audience navigant au clavier !

Afin de présenter cet aspect de manière plus ludique, vous pouvez consulter la vidéo faite par Tanguy Loheac concernant la visibilité du focus.

Si vous avez une préférence pour la lecture, nous vous invitons à regarder la version sous-titrée de la même vidéo de Tanguy Loheac concernant la visibilité du focus.

À propos de cet article

Vos commentaires

  • m-r-r Le 21 septembre 2013 à 13:04

    Salut,

    Même sans handicap, c’est souvent pratique de naviguer au clavier... l’absence d’outline est souvent gênant.

    Par contre, vérifier que les couleurs de chaque élément pouvant être sélectionné n’interfèrent pas avec l’outline doit être assez long, surtout une CSS chargée… Faire correspondre les états :active et :focus avec :hover me semble plus simple.

    Sinon, on peut aussi ajouter une animation à l’outline pour la rendre plus visible :

    @keyframes outline-anim {
     0%  { outline-offset: .10em; }
     50% { outline-offset: .20em; }
    }

    :focus {
     outline: thin dotted red;
     outline-offset: .1em;
     animation: outline-anim 1s  0ms infinite alternate;
    }
  • Axel Le 22 septembre 2013 à 22:38

    Très bien ! Maintenant il ne reste qu’à essayer d’avoir des outlines qui claquent graphiquement !

  • Hervé Renault Le 23 septembre 2013 à 11:52

    Une preuve de plus qu’il faut se méfier des "reset", non ?

  • Nicolas Hoffmann Le 23 septembre 2013 à 17:08

    @m-r-r : tiens, une idée à tester sourire

    @Hervé : comme de la peste. Vivent les resets très "softs".

  • tetue Le 5 octobre 2013 à 01:56

    Il existe carrément un site dédié à la préservation du outline : outlinenone.com, ici traduit en français : outlinenone.fr

    Je suis un peu plus radicale — à tort ou à raison ? — sur le signalement du focus, que je préfère renforcer, pour ne pas le perdre de vue, par une couleur de fond contrastée, déclarant en CSS :

    a:focus {
     outline: thin dotted;
     background: #222222 !important;
     border-color: #222222 !important;
     color: #f8f8f8 !important;
     text-shadow: none;
    }

    C’est plus confortable. Dans ce cas, avec une telle couleur de fond, est-il nécessaire de préserver le outline, ou peut-il être annulé ?

  • Serge Le 9 octobre 2013 à 01:03

    Merci pour l’article, il y a là un élément de design web que je n’ai jamais tenu compte et je crois bien que je suis loin d’être le seul. Dans l’idée de concevoir un design pour tablettes, pourrait-on mettre en outline ou en évidence similaire tous les éléments cliquable d’une page pour compenser l’absence d’effet hover que procure une souris.

  • tigoud Le 9 octobre 2013 à 09:08

    Merci, d’avoir rappelé que l’outline est très utile.
    cdlt

  • Matthieu Faure Le 2 février 2014 à 16:56

    Au quotidien, je me suis fait ma CSS personnalisée pour toujours avoir un ENORME outline, que j’ai mise dans l’extension firefox Stylish. Voici mon code :

    body a:hover:active {
     color: red;
    }

    body *:focus,
    body img:focus {
     outline: 3px solid red !important;
     outline-offset: 1px !important;
     -moz-outline-radius: 3px !important;
    }

    body a:focus {
     outline-offset: 0px !important;
    }

    body button:focus,
    body input[type=reset]:focus,
    body input[type=button]:focus,
    body input[type=submit]:focus {
     -moz-outline-radius: 5px !important;
    }

    body textarea:focus,
    body button:focus,
    body select:focus,
    body input:focus {
     outline-offset: -1px !important;
    }
  • Olivier Nourry Le 14 août 2015 à 21:47

    Pareil que Matthieu, sauf que comme je suis feignant, j’utilise le style tout fait "Bright Focus".

Répondre à cet article

Qui êtes-vous ?

Pour afficher votre trombine avec votre message, enregistrez-la d’abord sur gravatar.com (gratuit et indolore) et n’oubliez pas d’indiquer votre adresse e-mail ici.

Ajoutez votre commentaire ici
  • Ce formulaire accepte les raccourcis SPIP [->url] {{gras}} {italique} <quote> <code> et le code HTML <q> <del> <ins>. Pour créer des paragraphes, laissez simplement des lignes vides.

Suivre les commentaires : RSS 2.0 | Atom