css-focus-indicator-suppressed
L’indicateur de focus ne doit pas être supprimé sans remplacement
Signale les éléments de l’ordre de tabulation dont le contour de focus est supprimé, par une règle :focus/:focus-visible ou par une règle sans état comme a { outline: none }, sans indicateur de remplacement (border, box-shadow, background, ...) dans aucune règle de focus qui les cible.
Applicabilité. Éléments de la navigation séquentielle au clavier (tabulables et rendus) sur une page dont les feuilles de style lisibles contiennent au moins une règle qui supprime le contour. Sans aucune règle de ce type, chaque élément garde l’indicateur propre à l’agent utilisateur et il n’y a rien à vérifier.
Attendu. Aucun élément n’est ciblé par une règle qui supprime le contour (outline: none, outline: 0, outline-color: transparent, ...) sauf si une règle de focus qui le cible dessine un remplacement : une bordure, un box-shadow, un fond, un changement de couleur, un contour positif propre ou une décoration ::before/::after. La règle qui supprime est soit une règle :focus/:focus-visible, soit une règle sans aucun état (a { outline: none }, * { outline: 0 }) : une déclaration d’auteur l’emporte sur le contour de focus de l’agent utilisateur quelle que soit sa spécificité, elle supprime donc aussi l’indicateur à l’état focalisé (WCAG F78). Une règle qui ne le supprime que sous :not(:focus-visible) le conserve pour le focus clavier et n’est pas comptée ; pas plus que la forme qu’en donne le polyfill focus-visible, :not(.focus-visible) sous .js-focus-visible, ou :not([data-focus-visible-added]) sous [data-js-focus-visible].
Ce que rapporte un constat.
suppressingSelectors: le sélecteur de chaque règle de feuille de style qui supprime le contour (outline) de l’élément, un élément par sélecteur.
Ces champs de data.details aident à lire et à reproduire un constat. À part reasonCode et les quelques champs que la page Schéma de sortie donne comme stables, ils ne constituent pas un contrat stable : un champ peut être renommé ou supprimé dans une version mineure, ne vous appuyez donc pas dessus.
Exemples
<style>.reset-only:focus { outline: none; }</style><a class="reset-only" href="/pricing">Pricing</a>
:focus { outline: none; } supprime l’indicateur de focus, et aucune autre règle ciblant ce lien ne dessine de remplacement.
<style>a { outline: none; }</style><a href="/news">News</a>
Une règle sans :focus s’applique toujours pendant que le lien a le focus, et elle l’emporte sur le contour de focus du navigateur (F78). Aucune règle de focus ne dessine de remplacement.
<style>.reset-shadow:focus { outline: none; box-shadow: 0 0 0 3px navy; }</style><button class="reset-shadow" type="button">Send</button>
La règle même qui supprime le contour dessine un box-shadow à sa place.
Comment vérifier
Quand cette règle ne peut pas trancher, elle renvoie cantTell et laisse la question à une personne. Chaque question qu’elle peut poser figure ici sous son code de raison, avec les étapes pour y répondre. Un constat porte les mêmes étapes dans howToCheck, dans la langue de l’analyse. Voir Schéma de sortie.
FOCUS_INDICATOR_SUPPRESSED
- Cliquez juste avant l’élément indiqué par le rapport, puis appuyez sur Tab jusqu’à ce qu’il ait le focus.
- Cherchez sur l’élément, et autour de lui, tout changement visible lorsqu’il reçoit le focus.
- Appuyez sur Tab et Maj+Tab pour retirer puis remettre le focus, en comparant les deux états.
Réussite. Un indicateur visible, comme un contour, une bordure, un soulignement, un changement de couleur ou d’arrière-plan, montre quand l’élément a le focus.
Échec. Rien de visible ne change lorsque l’élément reçoit le focus, ce qui ne respecte pas le critère WCAG 2.4.7 (F78).