Succescriterium 2.4.11 Focus niet bedekt (minimum)
Niveau AA
Lees de officiële tekst van succescriterium 2.4.11 Focus niet bedekt (minimum)
Bedekte focus: scroll-margin
De browser schuift een onderdeel net binnen beeld zodra het de focus krijgt. Hij houdt daarbij geen rekening met een balk die eroverheen ligt, want die kent hij niet. Met
scroll-margingeef je die ruimte op.:where(a, button, input, select, textarea, summary, [tabindex]) { scroll-margin-block-start: 120px; /* de hoogte van de koptekst */ scroll-margin-block-end: 90px; /* wat er onderaan blijft staan */ }Zet de bovenwaarde op de hoogte van de koptekst en de onderwaarde op wat er onderaan blijft staan. Verschilt die hoogte per schermbreedte, zet hem dan in een variabele.
Dit werkt alleen als de browser moet scrollen. Staat het onderdeel al in beeld en valt er toevallig een chatknop overheen, dan gebeurt er niets. Laat zo’n knop dan wijken zodra er iets de focus heeft, en zorg dat de knop daarna nog bereikbaar blijft.
body:has(:focus-visible) .chatknop { opacity: 0; pointer-events: none; }De eenvoudigste oplossing is een balk die niet meescrolt. Een koptekst die gewoon bovenaan de pagina staat kan per definitie niets bedekken, en kost geen onderhoud.
DoelgroepenWie het raaktHulpmiddelenBedekte focus: zo test je het
Bovenaan de pagina staat een vaste balk op zijn plek en bedekt hij niets. De fout laat zich pas zien nadat de pagina is gescrold.
Ga als volgt te werk:
- Scroll een halve pagina naar beneden.
- Klik ergens in de tekst, buiten een link.
- Druk op Tab en kijk of het geselecteerde onderdeel zichtbaar is.
- Doe hetzelfde met Shift en Tab, dus omhoog. Daar gaat het het vaakst mis.
Voor dit criterium mag een deel bedekt zijn. Is er nog een stuk van de knop en de focusrand te zien, dan voldoet het. Is er niets te zien, dan niet. Bij twijfel is het antwoord meestal dat het niet genoeg is: een knop waarvan twee pixels zichtbaar zijn, is niet gevonden.
Dit script meldt elk onderdeel dat bij het krijgen van de focus wordt bedekt. Plak het in de console van de browser en tab daarna door de pagina:
document.addEventListener('focusin', function (e) { var r = e.target.getBoundingClientRect(); var boven = document.elementFromPoint(r.left + 4, r.top + 4); if (boven && boven !== e.target && !e.target.contains(boven)) { console.warn('bedekt door', boven, e.target); } });Elke melding is een plek om na te kijken. Het script vervangt de test niet, want het kent het verschil tussen gedeeltelijk en volledig bedekt niet.
DoelgroepenWie het raaktHulpmiddelenBedekte focus: wat het criterium vraagt
Een balk die vastgeplakt in beeld blijft staan kan het onderdeel bedekken waar de toetsenbordfocus net naartoe is gesprongen. De bezoeker ziet dan niet welk onderdeel is geselecteerd en weet niet wat er gebeurt bij het indrukken van Enter. Zorg daarom dat het onderdeel met de focus niet volledig bedekt wordt.
Een deel mag bedekt zijn, als de rest maar zichtbaar blijft. Dit criterium is nieuw in WCAG 2.2 en staat op niveau AA, dus het valt onder de wettelijke eis. Er is ook een strengere versie: 2.4.12 Focus niet bedekt (uitgebreid) op niveau AAA, waarbij er niets overheen mag staan.
De oorzaak is bijna altijd een van deze:
- Een menubalk die vastgeplakt bovenaan blijft staan.
- Een cookiemelding onderaan het scherm.
- Een chatknop in de hoek.
- Een balk met acties die verschijnt zodra de bezoeker scrolt.
- Een tabel met een vastgezette kop of kolom.
Het gaat het vaakst mis bij terugspringen. Gaat de bezoeker met Shift en Tab omhoog, dan zet de browser het onderdeel bovenaan het scherm — precies waar een vaste balk staat. Vooruit gaat meestal goed, achteruit niet.
DoelgroepenWie het raaktHulpmiddelen