RGAA Lab

RGAA 4.1.2 · Présentation de l’information · Critère 10.7

Dans chaque page web, pour chaque élément recevant le focus, la prise de focus est-elle visible ?

Qui navigue au clavier ne sait où il se trouve que par le focus : le supprimer revient à faire naviguer à l'aveugle sur sa propre page.

Ce que dit le référentiel

Transcription du RGAA 4.1.2, sans interprétation. C’est ce texte qui fait foi, et celui que vous citez dans un rapport.

  1. 10.7.1
    Pour chaque élément recevant le focus, la prise de focus vérifie-t-elle une de ces conditions ?
    • Le style du focus natif du navigateur n’est pas supprimé ou dégradé ;
    • Un style du focus défini par l’auteur est visible.

Comment le vérifier

  1. Parcourir toute la page à la tabulation, sans toucher la souris.
  2. À chaque arrêt, vérifier qu'on voit où l'on est.
  3. Chercher dans le CSS les outline: none et outline: 0 : chacun doit être remplacé par un style de focus visible, jamais laissé nu.
  4. Vérifier les zones à fond sombre ou à image de fond, où un focus par défaut devient parfois invisible.
  5. Ne pas oublier les éléments rendus focusables par tabindex, ni ceux qui ne le deviennent qu'après ouverture d'un menu ou d'une fenêtre modale.

Ce que notre outil fait

Détecté automatiquement

Notre moteur tranche seul sur ce critère : un échec est une non-conformité, avec la preuve qui va avec.

La règle pose le focus sur chaque élément de l'ordre de tabulation et compare le rendu de la page avant et après : si aucun pixel ne change, la prise de focus est invisible et c'est une non-conformité. Elle ne juge pas si la différence suffit — un focus réel mais très discret passe la règle et peut ne pas convenir. C'est le regard qui tranche ce second point.

Règles ACT du W3C mises en œuvre : oj04fd

Comment nous mesurons ce que l'outil sait faire · ce critère s'audite dans l'extension RGAA Lab.

Les pièges

Les erreurs qu’on rencontre vraiment, relevées au fil des audits.

  • :focus { outline: none } posé pour supprimer le contour au clic supprime aussi celui du clavier. :focus-visible sépare les deux cas.
  • Un focus déplacé par script sur un conteneur hors écran ne se voit nulle part, alors que le code semble correct.

À lire avec