Indicateur de focus absent

Un indicateur de focus absent signifie que lorsqu'un utilisateur parcourt les éléments interactifs d'une page au clavier -- liens, boutons, champs de formulaire, contrôles personnalisés -- aucun contour ou surbrillance visible n'indique quel élément détient actuellement le focus clavier. Le critère RGAA 10.7 (correspondant au WCAG 2.4.7, niveau AA) exige que l'indicateur de focus clavier soit visible sur tous les éléments interactifs.

Ce problème est massivement causé par des réinitialisations CSS et des choix de design qui suppriment le contour de focus par défaut du navigateur. La tristement célèbre règle `outline: none` ou `outline: 0`, souvent appliquée globalement via `*:focus { outline: none; }`, supprime le contour bleu ou pointillé que les navigateurs fournissent par défaut. Les designers le retirent parce qu'ils le jugent visuellement disgracieux, mais sans fournir un style de focus alternatif, ils rendent le site inutilisable pour les navigateurs au clavier.

Les frameworks CSS modernes et les feuilles de style de réinitialisation incluent parfois cet anti-pattern par défaut. Même lorsqu'un style de focus personnalisé est ajouté, il peut avoir un contraste insuffisant par rapport à l'arrière-plan, être trop subtil pour être remarqué (un changement de bordure de 1px à peine visible), ou n'être appliqué qu'à certains éléments tandis que d'autres restent invisibles lorsqu'ils reçoivent le focus.

Pour les utilisateurs qui naviguent exclusivement au clavier -- y compris les personnes ayant des handicaps moteurs, les utilisateurs avancés et toute personne temporairement incapable d'utiliser une souris -- un indicateur de focus absent revient à naviguer sur un site web les yeux bandés. Ils appuient sur Tab et n'ont aucune idée de leur position sur la page. Ils ne peuvent pas voir quel lien ils vont activer, dans quel champ de formulaire ils saisissent du texte, ni quel bouton ils vont presser.

Cela entraîne des clics erronés, des soumissions de formulaire accidentelles et une expérience profondément frustrante. Les utilisateurs finissent souvent par appuyer sur Tab de manière répétée tout en guettant des changements visuels subtils, ou abandonnent le site.

Les utilisateurs de lecteurs d'écran sont un peu moins affectés car leur technologie d'assistance annonce l'élément focalisé, mais les utilisateurs voyants au clavier ne reçoivent aucun retour de ce type. On estime que 15 à 20% des utilisateurs du web s'appuient sur la navigation au clavier au moins une partie du temps, ce qui en fait un problème à fort impact touchant une large audience.

Scrutia analyse le CSS calculé de chaque élément focalisable de vos pages pour détecter les indicateurs de focus manquants ou invisibles. Il vérifie les règles `outline: none` sans styles de remplacement, évalue le ratio de contraste des indicateurs de focus personnalisés par rapport à leur arrière-plan, et signale les éléments où l'état de focus ne produit aucun changement visible. Chaque constatation inclut le sélecteur CSS et un style de focus suggéré.