Cette traduction n’a pas encore été relue par la rédaction. La version allemande fait foi. Deutsche Fassung →

Barrierefreiheit

Pourquoi une barre d'en-tête fixée ne doit-elle jamais complètement cacher le focus clavier ?

Une barre d'en-tête fixée, une notification de cookie ou un pied de page collant ne doit jamais complètement cacher l'élément actuellement en focus, car les utilisateurs de clavier ne voient plus où ils en sont. Le critère 2.4.11 est nouveau avec WCAG 2.2 : lors du déplacement du focus dans la page, l'élément actif doit rester au moins partiellement visible — même si certaines parties de la page flottent au-dessus du contenu lors du défilement.

Comment les barres collantes engloutissent le focus

De nombreux sites web fixent les éléments à la marge de l'écran : la barre de menu en haut, une notification de cookie en bas, peut-être une bannière de newsletter entre les deux. Ces couches flottent au-dessus du contenu. Lorsque le focus du clavier se déplace dans la page, l'élément actif peut se situer exactement derrière l'une de ces barres — le cadre de focus est là, mais personne ne le voit. Pour les utilisateurs de clavier, cela ressemble à ce que le focus a disparu : ils appuient à nouveau sur Tab sans savoir quel bouton la touche Entrée va frapper. Les notifications de cookie hautes en bas de la page sont particulièrement délicates, car elles peuvent cacher des lignes de formulaire entières lors de la traversée Tab.

Comment le service de contrôle mesure l'occultation du focus

Pendant la traversée réelle du clavier, le service de contrôle vérifie à chaque arrêt de focus plusieurs points de l'élément actif : s'il y a une surface opaque fixée ou collante au-dessus de l'élément sur tous ces points, l'élément est considéré comme complètement caché — le critère est non respecté et le rapport nomme l'élément avec la capture d'écran de preuve. La mesure est intentionnellement prudente : les éléments qui font eux-mêmes partie d'une barre fixée ne sont jamais considérés comme cachés derrière, et les superpositions transparentes ne comptent pas comme une occultation. Si l'élément reste au moins partiellement visible à tous les arrêts, le critère est considéré comme respecté.

Beispiele

Fokus hinter der klebenden Kopfzeile

Verstoß

header { position: sticky; top: 0; height: 80px; }
/* Tab scrollt das Element unter den Header */

Erfüllt

header { position: sticky; top: 0; height: 80px; }
html { scroll-padding-top: 88px; }

scroll-padding hält beim Fokuswechsel den Bereich unter der Kopfzeile frei. Cookie-Banner fangen den Fokus ein, bis sie geschlossen sind.

Parcourez votre page et regardez le bord inférieur de l'écran — le focus disparaît-il temporairement derrière la notification de cookie ?
Gardez les barres fixées aussi étroites que possible, en particulier sur les petits écrans.
Demandez à votre agence de prévoir une distance de défilement lors du focus, de sorte que l'élément actif ne se retrouve jamais sous les barres fixées.
Testez avec la notification de cookie visible — c'est exactement dans cet état que les visiteurs pour la première fois voient votre page.

Deutsche Fassung dieser Seite

FAQ

Que signifie « focus non caché » en WCAG 2.2 ?

Le critère 2.4.11 exige : si un élément reçoit le focus du clavier, il ne doit pas être complètement caché derrière d'autres contenus — par exemple derrière des barres de menu fixées, des notifications de cookie ou des pieds de page collants. Au moins une partie de l'élément doit rester visible. Sinon, les utilisateurs de clavier perdront l'orientation car leur seul indicateur de localisation devient invisible.

Les barres de menu fixées et les bandeaux de cookie sont-ils interdits par ce critère ?

Non. Les barres fixées restent autorisées — elles ne peuvent tout simplement pas superposer complètement l'élément actuellement en focus. En pratique, cela signifie : gardez les barres étroites et prévoyez une distance de défilement lors du focus, de sorte que l'élément actif reste visible au-dessus ou au-dessous de la barre. Les deux sont possibles avec quelques lignes dans les directives de conception.

Comment l'occultation du focus est-elle mesurée automatiquement ?

Notre service de contrôle parcourt réellement la page et vérifie à chaque arrêt plusieurs points de l'élément actif : si une surface opaque fixée se trouve partout au-dessus, l'élément est considéré comme complètement caché et le critère comme non respecté — attesté par capture d'écran. Les superpositions transparentes et les éléments qui siègent eux-mêmes dans une barre fixée ne sont délibérément pas pénalisés.