11. NAVIGATION AU CLAVIER
Table des matières |
|---|
11.1 Ordre de tabulation
11.1.1 Veiller à ce que l'ordre de tabulation suive la logique de l'ordre de lecture
L’ordre de tabulation doit suivre la logique de l’ordre de lecture visuelle de la page.
C’est-à-dire que lorsqu’un élément interactif en précède immédiatement un autre lors du parcours visuel de la page, le focus doit continuer sur le second élément immédiatement après avoir quitté le premier. Donc, de gauche à droite.
ASTUCES
Vérification manuelle avec le « tab » lorsque la page est terminée.
ATTENTION
Sauf en cas très rares où l’interface est totalement stable et maîtrisée à long terme, veiller à ne jamais utiliser l’attribut tabindex avec une valeur supérieure à 0, au risque de perturber la logique de l’ordre de tabulation dans la page.
RESSOURCES
11.1.2 Mettre en place des liens d'évitement
Un lien d’évitement du type « Aller au contenu » doit systématiquement être présent sur chaque page afin de faciliter la navigation au clavier.
Ce lien doit être le premier élément interactif dans le code HTML. Il s’agit d’un lien vers une ancre qui doit permettre un accès direct au contenu principal de la page.
<a id="evitement" href="#contenu">Aller au contenu</a>
[…]
<div id="contenu" role="main">
[…]
</div>
REMARQUES
Dans certaines situations, beaucoup de tabulations sont nécessaires pour accéder au menu principal et/ou au moteur de recherche depuis le sommet de la page.
Une bonne pratique d’accessibilité consiste alors à mettre en place une liste de liens d’évitement.
<a href="#src-header" class="src-skip-nav">Aller au menu principal</a> <a href="#src-content" class="src-skip-nav">Aller au contenu principal</a> <a href="#src-nav-search" class="src-skip-nav">Aller à la recherche</a> <a href="#src-footer" class="src-skip-nav">Aller au pied de page</a>
NOTE : Cette pratique est déjà implantée dans la navigation de Radio-Canada.
ASTUCES
Les intitulés de ses liens doivent être clairs et courts. Il ne sert à rien de rajouter de l'information superflu : Un simple intitulé comme "Aller au contenu" est suffisant pour informer l'utilisateur de l'usage du lien.
ATTENTION
Bien qu’il soit fortement recommandé d’afficher ce lien, celui-ci peut être masqué par défaut s’il n’a pas été prévu dans les maquettes graphiques. En revanche, il doit dans tous les cas être rendu visible à la prise de focus au clavier.
Le lien d’évitement ne doit jamais être masqué à l’aide des propriétés CSS display: none; et/ou visibility: hidden; sous peine de le rendre totalement inatteignable au clavier.
Privilégier une autre solution, par exemple l’utilisation des codes suivants :
a.src-skip-nav {
color: transparent;
overflow: hidden;
position: absolute;
}
a.src-skip-nav:focus {
color: #07428a;
position: static;
}
Avec le code si dessus, les liens d'évitements ne seront pas stylisé. Il peut être bonifié pour respecter le graphisme de votre page.
RESSOURCES
Voir aussi Prévoir des liens d'évitement (Design graphique)
11.2 Visibilité de la prise de focus
11.2.1 Garantir la visibilité de la prise de focus au clavier
Afin de permettre aux utilisateurs qui naviguent au clavier de se situer dans la page, chaque élément interactif doit être visuellement mis en avant lors de la prise de focus (liens, champs de formulaires, boutons, etc.).
ASTUCES
Il faut doubler systématiquement chaque règle :hover par une règle :focus-visible dans la CSS.
Le minimum à respecter est que les propriétés de focus-visible soit les mêmes que ceux du hover, mais une personnalisation du focus-visible est également acceptable.
a:hover,
a:focus-visible{
text-decoration: underline;
}
ATTENTION
La règle outline: none; ne doit jamais être appliquée par défaut au focus dans la CSS, sauf dans les cas très précis où la visibilité du focus est ensuite surchargée plus tard dans la feuille de style. Il est toute fois fortement recommandé de garder les styles par défaut du navigateur.
RESSOURCES
Voir aussi le Prévoir l'aspect visuel et l'ordonnancement de la navigation par tabulation (focus) (Design graphique).