Navigation clavier & focus visible : checklist

La navigation au clavier est un socle : si le focus n'est pas visible ou si l'ordre de tabulation est incohérent, l'utilisateur ne peut pas progresser. Voici une liste de validation simple pour préparer vos critères RGAA.

1) Ordre de tabulation : logique et prévisible

  • Le parcours au Tab suit une lecture naturelle (gauche->droite, haut->bas).
  • Les éléments interactifs ne “saillent” pas d'une zone à une autre.
  • Les contrôles importants ne sont pas cachés/isolés dans des zones accessibles seulement avec la souris.

2) Focus visible : toujours apparent

  • Un indicateur de focus est visible pour tous les composants interactifs (liens, boutons, champs).
  • La visibilité fonctionne au clavier ET au chargement de la page.
  • Les styles de focus ne sont pas supprimés (ou masqués) en `:focus` / `:focus-visible`.

3) Raccourcis et “skip links”

Un lien d’évitement (skip link) permet d’aller directement au contenu principal. Vérifiez :

  • qu’il est atteignable au clavier,
  • qu’il est réellement fonctionnel (bascule vers la zone principale),
  • que le focus revient bien après l’action.

4) Modals, popups et focus management

Les fenêtres modales sont fréquentes dans les produits modernes. À vérifier :

  • la navigation clavier ne “sort” pas de la modale quand elle est ouverte (focus trap),
  • le premier élément interactif est cohérent,
  • la fermeture (ex : bouton “Fermer” ou `Esc`) renvoie le focus au contrôle qui a ouvert la modale.

5) Contrôles personnalisés : souris != clavier

Quand vous utilisez des composants custom (div cliquables, carrousels, menus gérés en JS), il faut reproduire l'accessibilité au clavier. Minimum à contrôler :

  • rôle approprié (ex : bouton / lien) et nom accessible,
  • gestion des interactions clavier (activation clavier, navigation interne si nécessaire),
  • annonce des états (ou au moins un feedback visuel cohérent).

Checklist de validation (rapide)

  • Tab => tous les interactifs sont atteignables.
  • Focus visible => l'utilisateur sait où il est.
  • Activation => Enter/Space fonctionne sur les contrôles.
  • Modale => focus géré et retour au bon endroit.
  • Pas de piège clavier (pas de focus “perdu”).

FAQ rapide

Pourquoi j'ai un focus visible mais “ça ne marche pas” au clavier ?

Souvent : un contrôle custom ne gère pas correctement la touche Enter/Espace, ou le focus est déplacé au mauvais moment (JS).

Focus visible vs focus “programmatique” : quelle différence ?

Le focus programmatique existe (un élément reçoit le focus) ; le focus visible est l’indication visuelle associée. Les deux doivent coexister pour être utilisables.

Que vérifier sur un menu déroulant ?

Attente clavier : ouverture, navigation dans les items, fermeture, et retour de focus à l’élément déclencheur.

Prochain pas : validez aussi vos formulaires accessibles, car ce sont souvent les zones les plus bloquantes dans les parcours.