Focus non masqué (renforcé)

Ce que le critère exige

Le critère 2.4.11 tolère un masquage partiel à condition qu’une partie de l’élément ayant le focus reste visible. Le critère 2.4.12 supprime cette tolérance : l’élément ayant le focus doit être entièrement visible. Naviguer par tabulation jusqu’à un bouton doit placer ce bouton intégralement dans la fenêtre sans qu’aucun élément ne le chevauche — ni un en-tête fixe rognant son bord supérieur, ni une bulle de chat rognant son bord inférieur droit.

Il s’agit d’un critère AAA à visée aspirationnelle pour la plupart des équipes, mais c’est la bonne cible pour les systèmes de conception utilisés dans les secteurs public, de la santé et de l’éducation, où la fiabilité du clavier n’est pas négociable.

Comment s’y conformer

• Définir scroll-padding-top et scroll-padding-bottom sur le conteneur de défilement de façon généreuse — légèrement plus que la hauteur combinée de tous les éléments fixes.
• Masquer automatiquement les widgets de chat lorsqu’un élément pouvant recevoir le focus s’approche de leur position, ou les déplacer à l’écart lors des événements de focus.
• Pour les pieds de page fixes, envisager des alternatives non fixes, ou les réduire lors du défilement pour qu’ils ne recouvrent que le contenu en titre, jamais les contrôles.
• Auditer chaque page dotée à la fois d’un en-tête fixe et d’un pied de page fixe. La « bande sûre » au milieu rétrécit rapidement, surtout sur les petits écrans.
• Tester à 200 % de zoom navigateur et à 400 % (conformément au critère 1.4.10 Redistribution) — les éléments fixes qui fonctionnaient à 100 % peuvent désormais occuper tout l’écran.

Échecs courants

• En-tête fixe qui recouvre les 4 premiers pixels de chaque indicateur de focus — conforme pour 2.4.11, mais non conforme pour 2.4.12.
• Cibles de lien d’évitement qui atterrissent tout en haut de <main> avec l’indicateur de focus partiellement rogné par l’en-tête fixe.
• Boutons « Aide » flottants en bas à droite qui chevauchent d’un pixel un coin des boutons ayant le focus dans cette zone.
• Bandeaux promotionnels injectés par des balises marketing non pris en compte dans les tokens scroll-padding du système de conception.
• Barres de navigation inférieures sur mobile où Tab vers le dernier champ de formulaire affiche le champ avec l’indicateur de focus légèrement rogné en bas.

Pourquoi c’est important

Pour les utilisateurs malvoyants qui dépendent de l’indicateur de focus pour suivre leur position, même un rognage partiel peut rendre l’indicateur effectivement invisible — un contour de 2 px dont le pixel supérieur est rogné ressemble à une ligne de 1 px, facile à confondre avec une bordure. Le critère renforcé traite l’indicateur de focus comme un élément d’interface de première classe qui mérite son intégralité à l’écran. S’engager sur le critère 2.4.12 oblige les équipes à rationaliser leur budget d’éléments fixes, ce qui améliore souvent la mise en page pour tout le monde.