Navigation au clavier : le test le plus rentable
Poser la souris et parcourir une page entière à la tabulation prend trois minutes et révèle plus de problèmes que n'importe quel outil automatique. C'est le premier geste d'un audit, et celui que toute équipe devrait pratiquer avant chaque mise en production.
Le test, en cinq gestes
- Placer le curseur en haut de page et appuyer sur la touche de tabulation.
- Le premier élément atteint doit être le lien d'évitement.
- Parcourir toute la page : chaque lien, bouton et champ doit être atteint, dans un ordre logique.
- À chaque étape, voir où l'on est.
- Entrer dans chaque composant — menu, modale, accordéon, lecteur vidéo — et vérifier qu'on peut en ressortir.
Les cinq défauts que ce test révèle
| Symptôme | Cause | Gravité |
|---|---|---|
| On ne voit pas où l'on est | Indicateur de focus supprimé par une règle de style | Bloquant |
| Un bouton n'est jamais atteint | Élément non interactif utilisé comme bouton | Bloquant |
| On ne peut plus sortir d'un composant | Piège au clavier : modale ou cadre tiers | Bloquant |
| Le focus saute d'un bout à l'autre de l'écran | Ordre du document différent de l'ordre visuel | Majeur |
| Le focus disparaît sous un bandeau fixe | En-tête collant qui recouvre l'élément actif | Majeur |
Supprimer l'indicateur de focus par défaut pour des raisons esthétiques, sans le remplacer. La décision se prend en maquette, se propage à tout le site, et rend la navigation clavier impraticable.
Le remplacement doit être visible sur tous les fonds et atteindre un contraste de 3:1 — voir contrastes et couleurs.
L'ordre de tabulation
Il suit l'ordre du document, pas l'ordre visuel. Quand une mise en page réorganise des blocs, les deux divergent et le parcours devient incohérent. La correction consiste à remettre le document dans l'ordre logique, pas à forcer des index de tabulation : ces derniers créent presque toujours plus de problèmes qu'ils n'en résolvent.
Le lien d'évitement
C'est le critère au meilleur rendement de tout le référentiel. Sans lui, une personne qui navigue au clavier retraverse le menu complet à chaque page — quarante tabulations avant d'atteindre le contenu. Avec lui, une seule.
Deux conditions : il doit être le premier élément de l'ordre de tabulation, et devenir visible quand il reçoit le focus. Un lien d'évitement masqué en permanence ne sert à rien.
Les composants qui piègent
Une fenêtre modale bien construite capture le focus à l'ouverture, le maintient à l'intérieur tant qu'elle est ouverte, se ferme par la touche d'échappement, et rend le focus à l'élément qui l'avait ouverte. Ce dernier point est celui que l'on oublie : sans lui, l'utilisateur est renvoyé en haut de page et doit tout recommencer.
Voir le design system accessible pour la spécification des composants.
Poursuivre
Pour la thématique qui pèse le plus sur la restitution du contenu, voyez les alternatives textuelles.