Focus niet verborgen
Wanneer een element toetsenbordfocus ontvangt, mag het niet volledig verborgen worden door sticky headers, cookiebanners, chatwidgets of overlays. Het meest gefaalde nieuwe WCAG 2.2-criterium.
When you tab to something, a sticky header or cookie banner mustn't hide it — you need to see what you've landed on.
WCAG 2.4.11 (Niveau AA, nieuw in 2.2) vereist dat wanneer een element toetsenbordfocus ontvangt, het niet volledig verborgen wordt door door de auteur gemaakte inhoud. De Niveau AAA-versie (2.4.12) vereist dat geen enkel deel van het element verborgen is.
De CSS-eigenschap scroll-padding-top is de eenvoudigste oplossing voor sticky headers. Voor overlays en banners, overweeg het inert-attribuut op achtergrondinhoud of positioneer ze zo dat ze inhoud verschuiven in plaats van bedekken.
Waarom dit belangrijk is
Het meest gefaalde nieuwe WCAG 2.2-criterium. Sticky headers, cookie-toestemmingsbanners, chatwidgets en notificatiebalken bedekken regelmatig gefocuste elementen tijdens toetsenbordnavigatie — waardoor de pagina onbruikbaar wordt voor toetsenbordgebruikers die niet kunnen zien waar ze zijn.
Hoe te detecteren
Tab door de hele pagina met het toetsenbord. Let vooral op wanneer de focus achter: sticky headers/footers, cookiebanners, chatwidgets, promotionele overlays en alle position:fixed of position:sticky elementen beweegt.
Hoe op te lossen
/* Prevent sticky header from covering focused elements */
html {
scroll-padding-top: 80px; /* height of sticky header + buffer */
}
/* Ensure focused elements scroll into view with clearance */
:focus {
scroll-margin-top: 100px;
scroll-margin-bottom: 100px;
}
/* Cookie banner: use inert on main content or make banner non-overlapping */
.cookie-banner {
position: sticky; /* not fixed — pushes content down */
bottom: 0;
}