La navigation au clavier
La navigation au clavier est l’un des aspects les plus importants de l’accessibilité du Web. De nombreux utilisateurs handicapés moteurs naviguent sur le web à l’aide d’un clavier.
Notre service : Accessibilité web – Rendre votre site Internet accessible
Il est important de veiller à ce que toutes les fonctionnalités soient accessibles à la souris et au clavier
- Tous les éléments interactifs : boutons, champs de saisie, liens etc. doivent pouvoir être atteints avec la touche Tab. Les éléments doivent pouvoir être activés et manipulés à partir des touches du clavier. Un internaute voyant doit disposer d’un indicateur visuel sur l’élément qui a le focus (soulignement, bordure autour de l’élément).
- Le focus doit être visible lors de la Tabulation
- L’ordre de tabulation doit être logique – L’ordre de navigation au clavier doit être logique et intuitif. Il suit le flux visuel de la page, de gauche à droite, de haut en bas (l’en-tête, puis la navigation principale, puis la navigation dans la page et enfin le pied de page).
Les tests du clavier
| Intéraction |
Touches au clavier |
Notes |
| Accédez aux éléments interactifs |
|
- Les indicateurs de focus du clavier doivent être présents.
- L’ordre de navigation doit être logique et intuitif.
|
| Lien |
Enter – activer le lien |
|
| Bouton |
Entrer or Barre d’espace
Activer le bouton |
- Assurez-vous que les éléments avec ARIA
role="button"peuvent être activés avec les deux raccourcis clavier.
|
| Case à cocher |
Barre d’espace
cocher/décocher une case |
- Les cases à cocher doivent être utilisées lorsqu’une ou plusieurs options d’un groupe peuvent être sélectionnées.
|
| Boutons radio |
- ↑/↓ or ←/→ – sélectionnez une option.
- Tab – passer à l’élément suivant
|
- Les boutons radio doivent être utilisés lorsqu’une seule option d’un groupe peut être sélectionnée.
|
| Sélectionnez le menu (déroulant) |
- ↑/↓ – naviguer entre les options du menu
- Barre d’espace
|
- Vous pouvez également filtrer ou accéder aux options du menu lorsque vous tapez des lettres.
|
| Saisie automatique |
- Tapez pour commencer le filtrage
- ↑/↓ – naviguer vers une option
- Entrer – sélectionnez une option
|
|
| Boites de Dialogue |
Esc – Fermer |
- Les boîtes de dialogue modales doivent maintenir le focus clavier.
- Les boîtes de dialogue non modales doivent se fermer automatiquement lorsqu’elles perdent le focus.
- Lorsqu’une boîte de dialogue se ferme, le focus doit généralement revenir à l’élément qui a ouvert la boîte de dialogue.
|
| Barre de menu |
- ↑/↓ – Option de menu précédente/suivante
- Entrer – développez le menu (facultatif) et sélectionnez une option.
- ←/→ – développer/réduire le sous-menu
|
- Une barre de menus modifie dynamiquement le contenu d’une application. Les liens qui utilisent Tab/Enter ne sont PAS des barres de menu
|
| Barre de défilement |
- ↑/↓ – faire défiler verticalement
- ←/→ – faire défiler horizontalement
- Spacebar/Shift + Spacebar – faire défiler par page
|
- La barre d’espace va, par défaut, faire défiler la page est un contrôle interactif qui permet la saisie de la barre d’espace n’est pas focalisée. Le défilement horizontal doit être minimisé.
|
