Pourquoi ne pas utiliser tabindex positif ?

C'est la pire chose que vous puissiez faire pour la navigation clavier. Un tabindex positif (1, 2, 3...) arrache l'élément de l'ordre naturel du DOM et le propulse en premier dans l'ordre de tabulation. Résultat : une navigation totalement imprévisible et un cauchemar à maintenir. La règle est simple : utilisez uniquement tabindex="0" ou tabindex="-1", point final.

Comment tester la navigation clavier ?

La méthode est brutale mais efficace : débranchez la souris et naviguez avec Tab, Shift+Tab, Entrée, Espace et Échap. Vérifiez trois choses : tous les éléments interactifs sont-ils atteignables ? Le focus est-il visible à chaque étape ? Y a-t-il des endroits où le focus reste coincé ? Si vous passez 5 minutes à tester comme ça, vous trouverez déjà les problèmes majeurs.

Qu'est-ce que :focus-visible ?

C'est la solution élégante au vieux dilemme « le focus est moche au clic ». :focus-visible est une pseudo-classe CSS qui s'active uniquement quand le focus provient du clavier, pas du clic souris. Résultat : un indicateur de focus bien visible pour les utilisateurs clavier, mais invisible quand on clique. Le meilleur des deux mondes.

Navigation clavier : tab order, focus visible et skip links

La navigation clavier : fondamentale pour l'accessibilité

Vous avez déjà essayé de naviguer sur votre propre site sans souris ? Faites le test, là, maintenant. 5 minutes. C'est le test le plus rapide et le plus révélateur que vous puissiez faire. La navigation au clavier est vitale pour les personnes à mobilité réduite, les utilisateurs de lecteurs d'écran, les personnes avec des troubles moteurs. Le RGAA y consacre plusieurs critères (7.1, 7.3, 12.7, 12.8) et il y a une bonne raison.

Ordre de tabulation (tab order)

Quand vous appuyez sur Tab, le focus se déplace d'un élément interactif au suivant. L'ordre doit être logique et prévisible — pas de surprise :

L'ordre de tabulation suit l'ordre du DOM HTML par défaut, et c'est très bien comme ça
Ne jamais utiliser tabindex > 0 : c'est la pire chose que vous puissiez faire pour la navigation clavier. Ça casse tout l'ordre naturel
tabindex="0" : rend un élément non interactif focusable dans l'ordre du DOM — utile pour les composants custom
tabindex="-1" : focusable uniquement en JavaScript, pas via Tab. Pratique pour gérer le focus dans les modales
L'ordre visuel (CSS) doit correspondre à l'ordre DOM — attention au flexbox order qui peut créer un décalage

Focus visible

L'indicateur de focus, c'est le contour qui montre quel élément est actif au clavier. Sans lui, l'utilisateur est aveugle. Et pourtant, combien de designers écrivent outline: none « parce que c'est moche » ? Trop.

Ne jamais supprimer outline: none sans fournir une alternative visible. Jamais.
Le focus doit être visible avec un contraste suffisant (3:1 minimum)
Personnalisez avec :focus-visible — cette pseudo-classe se déclenche uniquement au clavier, pas au clic souris. C'est le meilleur des deux mondes
Épaisseur recommandée : au moins 2px pour être bien visible
WCAG 2.2 ajoute le critère Focus Appearance qui précise ces exigences

:focus-visible { outline: 3px solid #4A90D9; outline-offset: 2px; }

Skip links (liens d'évitement)

Imaginez devoir appuyer sur Tab 47 fois avant d'atteindre le contenu principal. Ça arrive sur les sites sans skip link. C'est le premier élément focusable de la page (RGAA 12.7) :

Texte : « Aller au contenu principal »
Cible : href="#main" vers le <main id="main">
Visuellement masqué par défaut, il apparaît au focus — essayez sur n'importe quel site gouvernemental pour voir
On peut en ajouter d'autres : « Aller à la navigation », « Aller à la recherche »

Composants interactifs au clavier

C'est là que ça se complique un peu. Chaque type de composant a ses propres conventions clavier :

Menus déroulants

Entrée/Espace : ouvrir le menu
Flèches haut/bas : naviguer entre les items
Échap : fermer le menu et retourner au déclencheur
Tab : sortir du menu

Modales

Focus piégé à l'intérieur (focus trap) — oui, c'est le seul cas où « piéger » le focus est voulu
Échap : fermer la modale
Le focus retourne à l'élément qui a déclenché l'ouverture — détail souvent oublié mais crucial
aria-modal="true" sur le conteneur

Onglets (tabs)

Flèches gauche/droite : naviguer entre les onglets
Tab : entrer dans le panneau actif
Shift+Tab : revenir à l'onglet actif depuis le panneau

Pièges clavier

Un piège clavier, c'est quand l'utilisateur reste coincé dans un composant sans pouvoir en sortir avec Tab ou Échap. C'est comme être enfermé dans une pièce sans porte. Les causes les plus fréquentes :

Modales sans bouton de fermeture accessible — le classique
Lecteurs vidéo avec des contrôles non navigables au clavier
Widgets tiers (chatbots, cartes interactives) qui capturent le focus
iframes sans mécanisme de sortie

Si vous ne pouvez tester qu'une seule chose, testez la navigation clavier. Débranchez la souris, naviguez 5 minutes. Vous en apprendrez plus sur l'accessibilité de votre site qu'avec n'importe quel outil automatisé.