Accessibilité web : la navigation au clavier

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	Tab Shift + Tab	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 ARIArole="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é.