Accessibilité
Le focus clavier est visible : comment vérifier qu’il reste repérable ?
Évaluer visibilité, contraste, apparence et recouvrement sans confondre quatre critères WCAG ni conclure sur un simple outline CSS.
Un visiteur qui navigue au clavier doit savoir où il se trouve. Un contour peut être visible sur un bouton et disparaître sur le suivant, manquer de contraste ou se retrouver sous un panneau fixe. Pour décider quoi corriger, il faut séparer ces problèmes : WCAG 2.2 les traite dans plusieurs critères avec des niveaux différents.
Les critères à ne pas confondre
| Critère | Niveau | Question examinée | Méthode de vérification adaptée |
|---|---|---|---|
| 2.4.7 Focus Visible | AA | Le focus clavier est-il visible pour les éléments utilisables au clavier ? | Parcourir les contrôles avec Tab et Shift+Tab; repérer le contrôle actif et son indicateur. |
| 2.4.11 Focus Not Obscured (Minimum) | AA | Le contrôle focalisé est-il au moins partiellement visible et non entièrement masqué par un contenu créé par l’auteur ? | Parcourir la page et vérifier les zones recouvertes, notamment sous les en-têtes ou panneaux fixes. |
| 1.4.11 Non-text Contrast | AA | Les informations visuelles nécessaires pour identifier composants et états ont-elles un contraste suffisant avec les couleurs adjacentes ? | Mesurer les couleurs effectivement rendues lorsque ce critère s’applique; examiner chaque état pertinent. |
| 2.4.13 Focus Appearance | AAA | L’indicateur satisfait-il aux exigences de surface et de contraste entre états focalisé et non focalisé ? | Comparer l’aire de l’indicateur et les mêmes pixels dans les deux états, selon le texte normatif et ses exceptions. |
Le critère 2.4.13 demande notamment une aire équivalente au périmètre d’une bordure de 2 pixels CSS et un contraste de 3:1 entre les mêmes pixels des états focalisé et non focalisé. Ce calcul compare les deux états d’une même zone; le contraste avec les couleurs adjacentes relève du critère 1.4.11. Le critère AA 2.4.11 porte sur le recouvrement du contrôle focalisé; son contour peut être visible tout en étant masqué en partie par un panneau.
Un scénario fictif pour guider l’examen
Imaginez une page avec deux boutons : « Filtrer » sur un fond clair et « Exporter » dans une barre fixe en bas de l’écran. Au clavier, vérifiez d’abord que le focus atteint chaque bouton et reste repérable (2.4.7). Comparez la forme et les couleurs de l’indicateur à celles de son arrière-plan (1.4.11). Pour le niveau AAA, mesurez aussi l’aire et le contraste entre les deux états du même indicateur (2.4.13). Enfin, vérifiez que la barre fixe ne recouvre pas entièrement le bouton focalisé (2.4.11).
Le style :focus-visible affiche un indicateur selon le navigateur. Vérifiez son contraste et son recouvrement sur chaque état et fond de page. Un outline doit aussi rester visible avec les panneaux fixes.
Les couleurs de thème, le zoom, le mode de contraste forcé, l’ordre de navigation et la géométrie de la page influent sur l’examen.
Borne normative
La recommandation WCAG 2.2 a été publiée initialement le 5 octobre 2023. L’édition de la spécification utilisée ici porte la date du 12 décembre 2024. Les critères normatifs font foi; les pages d’explication WAI et leurs techniques sont informatives.
Sources techniques
- Web Content Accessibility Guidelines (WCAG) 2.2 — édition du 12 décembre 2024W3C
- WCAG 2.2 Recommendation — 5 October 2023W3C
- What's New in WCAG 2.2W3C WAI
- Understanding Success Criterion 2.4.7: Focus VisibleW3C WAI
- Understanding Success Criterion 2.4.11: Focus Not Obscured (Minimum)W3C WAI
- Understanding Success Criterion 2.4.13: Focus AppearanceW3C WAI
- Technique C45: Using CSS :focus-visible to provide keyboard focus indicationW3C WAI