WCAG 2.4.11 Focus non masqué (minimum)

Le critère de succès 2.4.11 exige que, lorsqu'un élément reçoit le focus clavier, il ne soit pas entièrement caché par un autre contenu maîtrisé par l'auteur, comme un en-tête fixe, un pied de page collant ou un bandeau cookies persistant. C'est un critère de niveau AA sous la règle 2.4 (Navigable) - nouveau dans les WCAG 2.2.

Le problème précis, et moderne, que ce critère traite

Les en-têtes et pieds de page fixes se sont imposés comme pratique de conception bien après la rédaction des versions antérieures des WCAG, et ils ont créé une défaillance qu'aucun des critères antérieurs relatifs au focus ne saisissait tout à fait : une personne descend la page par tabulation, et le champ ou le lien qu'elle vient d'atteindre défile sous un en-tête fixe. L'indicateur de focus existe techniquement - le critère 2.4.7 est satisfait -, mais il est désormais entièrement invisible, caché derrière un élément à position fixe qui le recouvre. La personne a réellement perdu le repère du focus, alors même que rien n'est « cassé » au sens où les critères antérieurs le décrivaient.

Pourquoi un critère nouveau et dédié était nécessaire

Le critère 2.4.7 Visibilité du focus exige qu'un indicateur de focus existe quelque part dans la mise en forme de la page. Il ne traite pas du cas où cet indicateur visible se retrouve recouvert, après défilement, par un élément sans rapport : une défaillance réellement différente, qui n'est devenue courante qu'avec la généralisation du positionnement fixe ou collant comme pratique de mise en page. C'est précisément pourquoi les WCAG 2.2 ont ajouté un critère ciblé plutôt que de s'en remettre au seul critère 2.4.7.

Ce que « minimum » autorise, par rapport à la version AAA plus exigeante

Ce critère de niveau AA exige seulement que l'élément ayant le focus ne soit pas entièrement caché : un masquage partiel est admis. Un critère associé de niveau AAA, 2.4.12 Focus non masqué (amélioré), exige qu'aucune partie de l'élément ayant le focus ne soit cachée. La plupart des sites n'ont à satisfaire que l'exigence de niveau AA, « au moins partiellement visible ».

La correction pratique

La propriété scroll-margin-top - ou scroll-padding-top sur le conteneur de défilement - réglée sur la hauteur de l'en-tête fixe garantit que, lorsqu'un élément entre dans la vue par le focus ou par une navigation par ancre, le navigateur laisse assez de place pour le maintenir hors de la zone recouverte :

:focus {
  scroll-margin-top: 80px; /* correspond à la hauteur de l'en-tête fixe */
}