Rendre le parcours du focus séquentiel et logique sans piège clavier

Cible : tout le monde, et en particulier les personnes déficientes visuelles, cognitives ou avec un trouble de l’attention 1et en mobilité.
Quand : lors du développement.

Description :

Les éléments (liens, boutons, éléments de formulaire) doivent recevoir le focus dans un ordre séquentiel et logique (de haut en bas et de gauche à droite) pour l’utilisateur, sans que celui-ci ne reste piégé ou bloqué, même pour du contenu généré dynamiquement apparaissant ou disparaissant (modification du DOM, Ajax,…).

Exemple, les puces numérotées indiquent l'ordre de déplacement du focus dans cette page :
Capture d'écran indiquant l'ordre de déplacement du focus dans une page

À vérifier :

  • Pour valider cette exigence, la position du focus doit être visible à tout moment (propriété outline et :focus en CSS), voir exigence 20, ci-dessous.
  • Attention à l’ordre d’apparition des éléments dans le code HTMLest le même que l'ordre de déplacement du focus dans la page. Un élément présent à la fin du code source mais positionné tout en haut de la page via CSS sera le dernier à recevoir le focus.
  • Pour la maintenabilité, éviter l’utilisation de l’attribut tabindex avec des valeurs supérieures à 0.
  • Même lors d’apparition ou de disparition de contenu, il faut conserver ce parcours logique et séquentiel. Ceci est vrai pour du contenu dynamiquement généré ou pour des SPA (single page application) ou des applications web sur une seule page. Pour plus de détails, voir Gérer le focus pour du contenu dynamique

Objectif utilisateur : Permettre la navigation logique sans piège au clavier dans les pages de l’application. Nécessaire pour les utilisateurs ne naviguant qu’au clavier (non ou malvoyants, déficients moteurs, déficients cognitifs, en mobilité).

Exemple non-valide :
Une page contenant un lecteur vidéo dont le focus peut entrer à l’intérieur du lecteur, mais ne peut pas en sortir (piège clavier).

Référence WCAG :