Navigation au clavier : rendre votre site accessible sans souris

Tout doit être accessible et utilisable au clavier

Le critère WCAG 2.1.1 (niveau A) impose que toutes les fonctionnalités soient disponibles au clavier, sans dépendre de la souris. Concrètement, on doit pouvoir atteindre chaque lien, bouton, champ de formulaire et composant interactif avec la touche Tab, puis l'activer avec Entrée ou Espace. Les éléments natifs HTML comme le lien, le bouton et le champ de saisie sont accessibles par défaut : les problèmes surviennent surtout avec des composants personnalisés construits à partir de balises génériques sans rôle ni gestion clavier.

Un ordre de tabulation logique

Le critère WCAG 2.4.3 (niveau A) demande que l'ordre de focus suive un enchaînement cohérent, qui préserve le sens et l'utilisation de la page. En pratique, l'ordre de tabulation doit correspondre à l'ordre visuel et logique de lecture, en général de haut en bas et de gauche à droite. Évitez de forcer cet ordre avec des valeurs tabindex positives, qui créent presque toujours des sauts déroutants : laissez l'ordre du code HTML refléter l'ordre d'affichage.

Un focus toujours visible

Quand on navigue au clavier, il faut voir en permanence où l'on se trouve. Le critère WCAG 2.4.7 (niveau AA) exige que l'élément ayant le focus soit visuellement repérable, par exemple grâce à un contour ou un changement d'apparence. L'erreur la plus fréquente consiste à supprimer ce contour en CSS sans le remplacer : ne masquez jamais l'indicateur de focus sans fournir une alternative bien contrastée et nettement visible.

Éviter les pièges du focus et faciliter le contournement

Le critère WCAG 2.1.2 (niveau A) interdit les pièges du clavier : une fois entré dans un composant, comme une fenêtre modale, l'utilisateur doit pouvoir en sortir au clavier seul. À l'inverse, dans une modale, le focus doit y rester tant qu'elle est ouverte plutôt que de filer derrière. Pensez aussi aux liens d'évitement, ces liens placés en début de page qui permettent d'aller directement au contenu principal : ils répondent au critère WCAG 2.4.1 (niveau A) sur le contournement des blocs répétés.

Questions fréquentes

Comment tester rapidement la navigation au clavier de mon site ?

Posez la souris de côté et parcourez votre page uniquement avec Tab pour avancer, Maj+Tab pour reculer, Entrée et Espace pour activer. Vérifiez que vous atteignez tous les éléments interactifs, que vous voyez toujours où se trouve le focus, et que rien ne vous bloque. Si vous perdez la trace du focus ou ne pouvez pas activer un élément, vous avez identifié un problème à corriger.

À quoi sert l'attribut tabindex et comment l'utiliser correctement ?

La valeur tabindex à zéro permet de rendre focusable un élément personnalisé qui ne l'est pas nativement. La valeur moins un retire un élément de l'ordre de tabulation tout en le laissant focusable par programmation. Évitez les valeurs positives, qui forcent un ordre artificiel et provoquent presque toujours des sauts désorientants. La meilleure approche reste d'utiliser des éléments HTML natifs et de soigner l'ordre du code.

Pourquoi ne faut-il pas supprimer le contour de focus en CSS ?

Ce contour est souvent le seul repère visuel pour les personnes qui naviguent au clavier. Le supprimer sans alternative rend la navigation impossible à suivre et constitue une non-conformité au critère WCAG 2.4.7. Si le style par défaut ne vous convient pas, remplacez-le par un indicateur personnalisé bien contrasté et clairement visible plutôt que de le retirer purement et simplement.

Qu'est-ce qu'un lien d'évitement et est-il obligatoire ?

Un lien d'évitement est un lien, souvent placé tout en haut de la page, qui permet de sauter directement au contenu principal sans reparcourir le menu à chaque page. Il répond au critère WCAG 2.4.1 sur le contournement des blocs répétés. Il n'est pas strictement obligatoire si une autre technique de contournement existe, mais c'est la solution la plus simple et la plus répandue pour les sites de PME.

Mon site est-il vraiment accessible au clavier ?

Seul un test concret le confirme. Notre diagnostic gratuit repère automatiquement les problèmes courants comme les éléments inatteignables, les pièges du focus ou l'absence d'indicateur visible. Pour une vérification complète des parcours interactifs, un audit manuel reste nécessaire, car certains cas, comme les composants personnalisés, échappent aux outils automatiques.