Indicateurs de focus visibles : ce qu'exigent la LAPHO de l'Ontario et WCAG, et la ligne de CSS qui les brise (2026)

La plupart des obstacles à l'accessibilité se construisent par accident. Celui-ci se construit habituellement exprès. Un développeur regarde le contour lumineux que le navigateur trace autour d'un bouton quand on l'atteint au clavier, décide qu'il jure avec le design, écrit une seule ligne de CSS, outline: none, et passe à autre chose sans rien remettre. La page paraît plus propre à la personne qui l'a faite, parce que cette personne utilise une souris et ne voit jamais le contour de toute façon. Mais pour un client qui navigue au clavier, un utilisateur de loupe d'écran, une personne avec un tremblement qui ne peut pas se servir d'un pavé tactile, ce contour était la seule chose à l'écran qui lui disait où il se trouve. Supprimez-le et il tabule à l'aveugle, appuie sur Entrée en espérant. L'obstacle est invisible pour la personne la plus susceptible de le remarquer, et c'est l'un des échecs les plus fréquents que nous trouvons sur les sites de l'Ontario.

Faits essentiels

• Le critère de succès 2.4.7 Focus visible de WCAG (Web Content Accessibility Guidelines) est de niveau AA et fait partie de la norme depuis WCAG 2.0. C'est important en Ontario : il se situe à l'intérieur du plancher légal applicable, pas au-dessus (W3C).
• WCAG 2.2 a ajouté deux autres règles de focus : 2.4.11 Focus non masqué (minimum) au niveau AA (nouveau en 2.2), et 2.4.13 Apparence du focus au niveau AAA (nouveau en 2.2), qui fixe une taille et un contraste minimum pour l'indicateur lui-même (W3C).
• WCAG 2.2 a introduit 9 nouveaux critères de succès par rapport à WCAG 2.1, et 6 des 9 sont de niveau A ou AA (W3C).
• Le RNAI de l'Ontario (Règlement sur les normes d'accessibilité intégrées, Règl. de l'Ont. 191/11), art. 14, exige des organisations de 50 employés ou plus qu'elles respectent WCAG 2.0 niveau AA sur les sites Web publics (ontario.ca).
• Le prochain RCL (Rapport de conformité en matière d'accessibilité) pour les organisations de 20 employés ou plus est dû le 31 décembre 2026 (ontario.ca).

Qu'exige réellement WCAG pour le focus au clavier ?

La version en langage simple du critère 2.4.7 Focus visible est celle-ci : chaque fois qu'un client parcourt votre page au clavier, l'élément sur lequel il est arrivé doit afficher un repère de focus visible. Un bouton, un lien, un champ de formulaire, un élément de menu, lorsqu'il est l'élément actif, doit avoir l'air visiblement différent de ceux qui l'entourent. WCAG 2.0 ne dicte pas le style exact, seulement que le focus soit visible. C'est le jumeau du parcours au clavier : l'utilisabilité au clavier vous mène jusqu'à chaque commande, et un indicateur de focus visible vous dit sur laquelle vous êtes une fois arrivé. L'un sans l'autre, c'est une demi-porte.

WCAG 2.2 a resserré les règles autour. 2.4.11 Focus non masqué (minimum) (niveau AA) dit que lorsqu'un élément reçoit le focus, au moins une partie de celui-ci doit rester visible et ne pas être complètement cachée derrière un en-tête collant, une bannière de témoins, ou une bulle de clavardage flottante, un vrai problème sur les sites modernes où une barre d'outils fixe peut se poser juste sur le champ que vous venez d'atteindre. 2.4.13 Apparence du focus (niveau AAA) va plus loin et précise à quel point l'indicateur doit être grand et contrasté, ce qui explique pourquoi un anneau de focus techniquement présent mais réduit à une pâle ligne grise d'un pixel échoue à l'esprit de la règle.

Pourquoi une ligne de CSS le brise-t-elle, et la LAPHO le couvre-t-elle ?

Voici le portrait juridique honnête, et il est plus strict que celui de certains critères plus récents. La LAPHO de l'Ontario (Loi sur l'accessibilité pour les personnes handicapées de l'Ontario) nomme WCAG 2.0 niveau AA comme norme applicable. Focus visible est un critère de niveau AA de WCAG 2.0. Alors contrairement à l'authentification accessible, arrivée dans WCAG 2.2 et située au-dessus du plancher légal, un indicateur de focus manquant est un échec par rapport à la version exacte de WCAG vers laquelle pointe le RNAI de l'Ontario. Ce n'est pas un écart de type meilleure-pratique-à-viser ; c'est à l'intérieur de la ligne, la même distinction tracée dans WCAG 2.0 vs 2.2 en Ontario.

Où cela casse-t-il ? Presque toujours à l'un de ces endroits :

• Une feuille de style globale avec outline: none ou outline: 0 sur les liens, boutons ou champs, sans aucun style :focus ni :focus-visible remis pour le remplacer.
• Un composant sur mesure (une liste déroulante, une fenêtre modale, un curseur) bâti en JavaScript qui ne donne jamais de style de focus à ses parties interactives.
• Une réinitialisation de système de design qui retire la valeur par défaut du navigateur sur tout le site, faisant disparaître l'anneau sur chaque page d'un coup.
• Un anneau de focus qui est là mais se fait cacher derrière un en-tête collant ou une surcouche, le cas exact pour lequel 2.4.11 a été écrit.

Rien de tout cela ne se répare avec un module ajouté, car une surcouche ne peut pas réécrire votre CSS : que vos boutons affichent le focus est décidé dans votre propre feuille de style, pas par un script greffé par-dessus. Le correctif est l'inverse de la casse, rétablir un style :focus-visible visible avec assez de taille et de contraste de couleur pour être réellement vu.

Comment vérifier vos indicateurs de focus, et quel est le risque s'ils manquent ?

Vous pouvez tester l'essentiel de ceci en une minute environ, sans aucun outil :

1. Cliquez une fois dans la barre d'adresse, puis appuyez plusieurs fois sur Tab pour parcourir votre page au clavier seul.
2. À chaque arrêt, posez une seule question : est-ce que je vois où je suis ? Un anneau, une bordure ou une surbrillance nette devrait se déplacer avec vous de commande en commande.
3. Surveillez le repère qui disparaît sur les menus sur mesure, les fenêtres modales, ou après l'ouverture d'une fenêtre surgissante, et celui qui se fait couvrir par un en-tête collant en haut de l'écran.
4. Vérifiez que l'indicateur est assez fort pour être remarqué, pas un filet pâle qu'un client malvoyant manquerait.

Les enjeux sont ceux qui s'attachent à tout obstacle d'accès. En Ontario, la LAPHO ne prévoit aucun droit d'action privé : personne ne poursuit en vertu de celle-ci directement ; la voie active pour un particulier est le TDPO (Tribunal des droits de la personne de l'Ontario), qui entend les plaintes en vertu du Code des droits de la personne de l'Ontario, et un client qui ne peut pas dire sur quel bouton il s'apprête à appuyer se voit refuser l'accès égal que ces plaintes décrivent. Si vous vendez aux États-Unis, un focus invisible est une allégation courante dans les litiges Web en vertu de l'ADA (Americans with Disabilities Act). La réponse durable est la même que pour chaque lacune : la remédiation documentée, une trace datée de ce que vous avez trouvé et corrigé, qui est ce qu'un RCL honnête devrait refléter d'ici le 31 décembre 2026. Et comme une machine peut confirmer qu'un outline: none existe mais ne peut pas juger si un vrai utilisateur au clavier peut suivre le focus à travers vos composants sur mesure, c'est une raison de plus pour laquelle une analyse n'est pas un audit.

Voyez si votre site signale des états de focus manquants ou d'autres problèmes d'accessibilité, rapport Vayle gratuit, environ 30 secondes : vayle.art. Il détecte les surcouches, révèle les véritables manquements à WCAG et vous indique exactement ce qui s'applique légalement à votre organisation en Ontario. Sans engagement.

Vayle est un studio d'ingénierie de l'accessibilité à distance au service de l'Ontario. Renseignements généraux, pas un avis juridique.