Thématique 10 · Présentation de l'information

Critère RGAA 10.7 : Focus visible

Une personne qui navigue au clavier doit voir où elle se trouve : sans indicateur de focus, elle avance à l'aveugle.

Niveau: AA
WCAG 2.2: 1.4.1, 2.4.7
Thématique: Présentation de l'information
Vérification: Détection partielle

La question posée par le RGAA

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

Comment respecter ce critère

Ne supprimez jamais le contour de focus (outline: none) sans le remplacer par un indicateur bien visible.
Utilisez :focus-visible pour un style de focus net et contrasté, et dessinez l'état focus dans la maquette de chaque composant.

Exemple

La prise de focus n'est pas visible (outline supprimé sans remplacement).

✗ À éviter

:focus { outline: none; }

✓ À faire

:focus-visible { outline: 2px solid #1a73e8; outline-offset: 2px; }

Les tests officiels

Pour être conforme, chaque élément concerné de la page doit satisfaire les tests suivants :

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.)

Source : RGAA 4.1.2, critère 10.7, DINUM (nouvel onglet), sous Licence Ouverte. Le RGAA précise aussi des cas particuliers et un glossaire à consulter pour un audit officiel.

Comment Accessia le vérifie

Accessia détecte automatiquement une partie des manquements à ce critère et les signale « à confirmer » ; la revue guidée vous fait vérifier le reste avec les tests officiels.