Navigation clavier d'un site web : comment la tester et la corriger

Un site peut sembler propre visuellement et rester inutilisable pour une personne qui navigue uniquement au clavier. C’est l’un des écarts les plus pénalisants, parce qu’il bloque l’accès aux menus, aux formulaires, aux modales et aux parcours de conversion.

La bonne nouvelle, c’est que la navigation clavier se teste rapidement, à condition d’avoir une méthode.

Pourquoi ce sujet est critique

La navigation clavier concerne notamment les utilisateurs qui ne peuvent pas utiliser une souris, certaines personnes malvoyantes, les utilisateurs de lecteurs d’écran ainsi que les personnes qui utilisent des aides techniques ou un clavier externe sur mobile et tablette.

Dès qu’un parcours dépend d’un clic impossible à reproduire au clavier, le service devient partiellement inaccessible.

Test n°1 : parcourir la page avec Tab

Commencez sans outils, simplement avec les touches suivantes :

• Tab pour avancer
• Shift + Tab pour revenir
• Entrée pour activer
• Espace selon les composants
• Échap pour fermer les couches ou dialogues

Le focus doit rester visible, apparaître dans un ordre logique, atteindre tous les éléments interactifs et ne pas passer sur des éléments cachés.

Test n°2 : vérifier le focus visible

Un focus discret ou supprimé pose un vrai problème. Contrôlez les liens, les boutons, les champs, les cartes cliquables, les menus déroulants et les filtres.

Si l’utilisateur ne sait pas où il se trouve, la navigation devient vite impraticable.

Test n°3 : contrôler les composants riches

Les erreurs apparaissent souvent dans les modales, les menus burger, les onglets, les carrousels, les accordéons et les systèmes de filtre.

Questions à poser :

• peut-on entrer dans le composant au clavier ?
• peut-on l’utiliser sans souris ?
• peut-on en sortir proprement ?
• le focus revient-il au bon endroit après fermeture ?

Test n°4 : suivre un parcours métier complet

Le vrai test consiste à terminer une action entière, comme contacter l’entreprise, créer un compte, lancer un essai, finaliser un achat ou télécharger un document.

Le but n’est pas de vérifier un composant isolé, mais la fluidité réelle du parcours.

Les problèmes les plus fréquents

On retrouve presque toujours des boutons non focusables, des liens créés avec des éléments non sémantiques, un ordre de tabulation incohérent, des modales qui piègent ou perdent le focus, des sous-menus qui ne s’ouvrent qu’au survol et des éléments interactifs sans nom accessible.

Ces défauts apparaissent souvent quand les composants ont été construits pour la souris d’abord.

Comment corriger proprement

Utiliser les bons éléments HTML

Un bouton doit être un button. Un lien doit être un a avec href. Ce principe élimine une partie des problèmes avant même de parler d’ARIA.

Garder le focus visible

Ne supprimez pas les styles de focus par défaut sans les remplacer par un style clairement visible.

Gérer les dialogues et menus explicitement

Pour les modales et menus :

• envoyez le focus au bon endroit à l’ouverture
• limitez la navigation au composant tant qu’il est actif si nécessaire
• restituez le focus à l’élément déclencheur à la fermeture

Éviter les détours inutiles

Un ordre de tabulation trop long ou illogique fatigue vite l’utilisateur. Simplifiez la structure et réduisez les faux éléments interactifs.

Intégrer ce test dans le cycle produit

La navigation clavier doit être testée avant mise en ligne, à chaque refonte de composant, après ajout de JavaScript interactif et sur les parcours qui génèrent du revenu ou du support.

Elle peut aussi être intégrée à une checklist RGAA avant mise en ligne.

Conclusion

Tester la navigation clavier n’est ni long ni optionnel. C’est l’un des moyens les plus rapides de repérer des blocages graves sur un site.

Si vous voulez repérer plus vite les composants à risque avant validation manuelle, Conformi permet d’automatiser une partie des contrôles et de concentrer les tests clavier sur les zones qui comptent vraiment.