Versions Compared
Key
- This line was added.
- This line was removed.
- Formatting was changed.
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.
Image ModifiedRESSOURCES
Voir aussi JavaScript et interface richesPermettre le contrôle des scripts à la fois avec la souris et le clavier (JavaScript et interfaces riches)
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.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<a id="evitement" href="#contenu">Aller au contenu</a> […] <div id="contenu" role="main"> […] </div> |
Image ModifiedREMARQUES
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.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
<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 supperflu 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 :
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
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 Conception graphiquePré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.
Code Block | ||||||
---|---|---|---|---|---|---|
| ||||||
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 document JavaScript et interface richePrévoir l'aspect visuel et l'ordonnancement de la navigation par tabulation (focus) (Design graphique).