Un site web peut sembler parfaitement utilisable avec une souris tout en devenant difficile, voire impossible, à parcourir au clavier. Pourtant, certaines personnes naviguent principalement avec la touche Tabulation, les flèches, Entrée, Espace ou d’autres commandes clavier.
L’accessibilité ne consiste donc pas seulement à rendre les boutons visibles. Il faut aussi pouvoir atteindre les éléments interactifs dans un ordre logique, comprendre où l’on se trouve et éviter de rester bloqué dans un menu, une fenêtre ou un composant.
Pourquoi tester la navigation au clavier ?
La navigation au clavier concerne les personnes qui ne peuvent pas utiliser une souris, qui utilisent certaines technologies d’assistance ou qui préfèrent simplement naviguer sans dispositif de pointage.
Un parcours essentiel devrait notamment permettre d’atteindre les liens, boutons, champs de formulaire, menus et autres contrôles interactifs lorsque cela est pertinent, sans imposer l’usage de la souris.
Qu’est-ce que le focus clavier ?
Le focus indique quel élément de la page est actuellement sélectionné pour recevoir une action au clavier. Lorsque vous appuyez sur la touche Tabulation, ce focus se déplace généralement d’un élément interactif au suivant.
Il doit être suffisamment visible pour que l’utilisateur sache immédiatement où il se trouve. Si le focus disparaît visuellement, la navigation devient rapidement difficile, même si les éléments restent techniquement accessibles.
À quoi ressemble un bon focus visible ?
Un bon indicateur de focus peut prendre la forme d’un contour, d’un changement de bordure ou d’un autre signal visuel suffisamment perceptible autour de l’élément actif.
Il ne doit pas être confondu avec un simple effet de survol à la souris. Le survol et le focus correspondent à deux modes d’interaction différents, et un site doit prévoir un comportement adapté pour chacun.
Quel ordre doit suivre la touche Tabulation ?
L’ordre de navigation doit rester cohérent avec la structure visuelle et logique de la page. Un utilisateur ne devrait pas passer brutalement du haut de page au pied de page, puis revenir au milieu sans raison compréhensible.
Les éléments masqués ou non pertinents ne devraient pas recevoir inutilement le focus. À l’inverse, un bouton ou un contrôle essentiel ne doit pas être inaccessible au clavier.
Qu’est-ce qu’un piège au clavier ?
Un piège au clavier apparaît lorsqu’un utilisateur peut entrer dans un composant avec le clavier mais ne peut plus en sortir normalement.
Cela peut se produire dans une fenêtre modale, un menu déroulant, un carrousel ou un composant personnalisé mal conçu. L’utilisateur doit pouvoir poursuivre son parcours ou fermer le composant avec des commandes prévues et compréhensibles.
Menus, accordéons et fenêtres : que faut-il vérifier ?
Les composants interactifs nécessitent une attention particulière. Pour un menu ou un accordéon, il faut notamment vérifier que l’ouverture et la fermeture sont possibles au clavier, que l’état du composant est compréhensible et que le focus ne se perd pas.
Pour une fenêtre modale, le focus doit être géré de manière cohérente : l’utilisateur doit savoir qu’une nouvelle interface s’est ouverte, pouvoir utiliser ses commandes et revenir ensuite dans le parcours sans confusion.
Et les formulaires ?
Un formulaire accessible doit pouvoir être parcouru de manière logique. Chaque champ doit être identifiable, les libellés doivent rester compréhensibles et les messages d’erreur doivent pouvoir être repérés sans dépendre uniquement de la couleur.
Les boutons d’envoi, cases à cocher, boutons radio et autres contrôles doivent eux aussi rester utilisables sans souris lorsqu’ils font partie du parcours.
Comment tester simplement la navigation clavier de son site ?
Un premier test peut être réalisé sans outil spécialisé :
- recharger la page et ne plus utiliser la souris ;
- utiliser la touche Tabulation pour avancer dans les éléments interactifs ;
- utiliser Maj + Tabulation pour revenir en arrière ;
- vérifier que le focus reste toujours visible ;
- tester les boutons avec Entrée ou Espace lorsque cela correspond au composant ;
- ouvrir et fermer les menus, accordéons et fenêtres ;
- remplir un formulaire jusqu’à son envoi ;
- vérifier qu’aucun composant ne bloque la navigation.
Ce test simple permet déjà de repérer des problèmes que de nombreux contrôles automatiques ne détectent pas correctement.
Que prévoient les WCAG 2.2 ?
Les WCAG 2.2 comportent plusieurs critères liés à l’utilisation au clavier et à la visibilité du focus. Ils visent notamment à rendre les fonctionnalités utilisables sans dépendre d’un dispositif de pointage, à éviter les pièges au clavier et à permettre de repérer visuellement l’élément qui possède le focus.
La vérification ne doit toutefois pas se limiter à cocher des critères : il faut tester le parcours réel et s’assurer que l’utilisateur peut comprendre ce qui se passe à chaque étape.
Un menu accessible au clavier suffit-il à rendre tout le site accessible ?
Non. La navigation clavier n’est qu’une partie de l’accessibilité. Le site doit également prendre en compte les contrastes, l’agrandissement du texte, le reflow, les formulaires, la structure des contenus, les alternatives aux informations visuelles et d’autres besoins selon le périmètre.
Que peut vérifier DOMMAT ?
Dans un audit ou un contrôle d’accessibilité, DOMMAT peut examiner les principaux parcours au clavier, la visibilité du focus, l’ordre de navigation et le comportement des composants interactifs dans le périmètre convenu.
Pour aller plus loin, découvrez ce que vérifie un audit d’accessibilité web, consultez l’approche Accessibilité DOMMAT, lisez notre article sur l’agrandissement du texte ou celui consacré au daltonisme et aux couleurs accessibles.
Vous pouvez également présenter votre besoin d’accessibilité.