Navigation au clavier : testez votre site en 5 minutes

La navigation au clavier se teste en cinq minutes, sans outil et sans compétence technique. Vous n'avez besoin que d'une touche : la tabulation.

Ce test révèle, à lui seul, les blocages les plus graves d'un site. Voici le protocole exact que j'applique en rendez-vous.

Lancer un premier diagnostic gratuit

Pourquoi la navigation au clavier compte autant

Certaines personnes n'utilisent jamais de souris. Handicap moteur, tremblements, fatigue, ou simple préférence.

Par ailleurs, les lecteurs d'écran s'appuient eux aussi sur le clavier. Si le clavier ne passe pas, l'outil ne passe pas non plus.

Enfin, ce critère conditionne tous les autres. Un formulaire parfaitement étiqueté ne sert à rien si personne ne peut l'atteindre.

Le test en cinq minutes, étape par étape

Étape 1 : posez la souris

Écartez-la physiquement du bureau. La tentation de cliquer revient sans arrêt, et fausse le test.

Étape 2 : ouvrez votre page d'accueil

Cliquez une dernière fois dans la barre d'adresse, puis appuyez sur la touche de tabulation.

Étape 3 : avancez élément par élément

Chaque appui déplace le focus vers le lien ou le champ suivant. Trois questions à chaque étape :

• voyez-vous clairement où vous êtes ?
• l'ordre suit-il la lecture naturelle de la page ?
• atteignez-vous tout ce qu'un visiteur doit atteindre ?

Étape 4 : ouvrez le menu

Arrivé sur une entrée de menu, essayez d'ouvrir le sous-menu. Rien ne se passe ? Vous tenez le défaut de navigation au clavier le plus répandu.

Étape 5 : testez une fenêtre modale

Bandeau cookies, popup de newsletter, fenêtre de connexion. Ouvrez-la, puis continuez à tabuler.

Ensuite, le focus doit rester à l'intérieur. Enfin, la touche d'échappement doit la fermer.

Étape 6 : allez jusqu'au bout d'un formulaire

Remplissez et validez votre formulaire de contact, uniquement au clavier. C'est le test qui échoue le plus souvent.

Les six défauts que ce test révèle

Symptôme	Ce qui se passe	Gravité
Focus invisible	Le contour a été supprimé en feuille de style	Bloquant
Menu inaccessible	L'ouverture se déclenche au survol uniquement	Bloquant
Piège de focus	La fenêtre modale ne rend jamais la main	Bloquant
Faux bouton	Une division sert de bouton, le clavier l'ignore	Bloquant
Ordre incohérent	Le focus saute d'une colonne à l'autre	Gênant
Focus caché	L'élément actif passe sous un en-tête fixe	Gênant

Les quatre premiers rendent une partie du site inutilisable. Traitez-les avant tout le reste.

Le lien d'évitement, grand oublié

Sur un site classique, l'en-tête contient une vingtaine de liens. Sans raccourci, un utilisateur au clavier les traverse tous, à chaque page.

Heureusement, le lien d'évitement règle ce problème. Placé en tout premier, il saute directement au contenu principal.

Ce lien reste invisible tant que personne ne l'atteint. Puis il apparaît dès qu'il reçoit le focus, ce qui suffit largement.

Ce que le focus doit montrer

Un indicateur discret ne suffit pas. En effet, il doit rester visible sur tous les fonds, y compris sur vos images.

Trois règles pratiques :

• un contour d'au moins deux pixels, ou un fond nettement différent ;
• un contraste suffisant avec l'arrière-plan, comme pour le texte ;
• jamais de suppression pure et simple pour des raisons esthétiques.

Si l'indicateur par défaut vous déplaît, remplacez-le. Ne le supprimez pas.

Les touches à connaître pour tester correctement

La tabulation ne suffit pas toujours. Certains composants attendent d'autres touches.

Touche	Ce qu'elle doit faire
Tabulation	Passer à l'élément interactif suivant
Tabulation avec majuscule	Revenir à l'élément précédent
Entrée	Activer un lien ou un bouton
Barre d'espace	Activer un bouton, cocher une case
Flèches	Parcourir un groupe : onglets, boutons radio, menu ouvert
Échappement	Fermer une fenêtre ou un menu déroulant

Une navigation au clavier correcte respecte ces six comportements. Ils correspondent à ce que tout utilisateur attend, sur n'importe quel site.

Ce que le test ne dit pas

Ce protocole repère les blocages, pas la totalité des écarts. En effet, il ne mesure ni les contrastes, ni la qualité des alternatives textuelles.

Il ne remplace donc pas un audit complet. Il vous dit simplement si votre site est utilisable, ou pas.

Le cas des composants achetés

Carrousels, sélecteurs de date, filtres produits, onglets. Ces composants viennent souvent d'une extension.

Testez-les donc un par un avant d'acheter. Par ailleurs, un éditeur sérieux documente toujours le comportement clavier de son module.

À défaut, vous héritez d'un défaut que vous ne pourrez pas corriger vous-même.

Combien de temps pour corriger

En pratique, le focus visible se rétablit en quelques minutes, en feuille de style. Quant au lien d'évitement, il demande une heure.

En revanche, le menu et les fenêtres modales relèvent du développeur. Comptez donc une journée sur un site vitrine classique.

Pour situer ces critères dans le référentiel, consultez notre guide des critères RGAA. Les autres écarts fréquents figurent dans notre liste des quinze erreurs.

Lancer le dépistage gratuit

Dépistage automatique : il couvre environ 30 % des critères du référentiel. Il ne remplace pas un audit manuel et ne vaut pas attestation de conformité.

Votre test a échoué dès le menu ? Écrivez-nous, nous chiffrons la correction.

Références : recommandations du W3C et portail de l'accessibilité numérique de l'État.