Deze vertaling is nog niet redactioneel gecontroleerd. De Duitse versie is leidend. Deutsche Fassung →
Barrierefreiheit
Waarom mag een vaste kopbalk de toetsenbord-focus nooit volledig verbergen?
Een vaste kopbalk, een cookieverklaring of een kleverige voettekst mag het momenteel gefocuste element nooit volledig verbergen, omdat toetsenbordgebruikers anders niet meer zien waar zij staan. Criterium 2.4.11 is nieuw met WCAG 2.2: wanneer de focus door de pagina beweegt, moet het actieve element minstens deels zichtbaar blijven — zelfs als onderdelen van de pagina bij het scrollen over de inhoud zweven.
Hoe kleverige balken de focus opslokken
Veel websites fixeren elementen aan de schermedge: de menubalk bovenaan, een cookieverklaring onderaan, daartussenin misschien een nieuwsbriefbanner. Deze lagen zweven over de inhoud. Wanneer de toetsenbord-focus nu door de pagina beweegt, kan het actieve element exact achter zo'n balk liggen — het focuskader is er, maar niemand ziet het. Voor toetsenbordgebruikers voelt het alsof de focus is verdwenen: zij tabben verder en weten niet welke knop zij met Enter raken. Vooral lastig zijn hoge cookieverklaringen onderaan, achter welke bij het doorvogelen hele formulierrijen kunnen verdwijnen.
Zo meet de controledienst de focus-verberging
Tijdens de echte toetsenbord-doorvoering controleert de controledienst bij elke focus-stop meerdere punten van het actieve element: liggen op al deze punten een ondoorzichtige, vaste of kleverige laag over het element, dan geldt het als volledig verborgen — het criterium wordt overtreden, en het rapport noemt het element met bewijsfoto. De meting oordeelt opzettelijk voorzichtig: elementen die zelf deel uitmaken van een vaste balk worden nooit als daarachter verborgen beschouwd, en doorzichtige overlays tellen niet als verberging. Blijft het element bij alle stops minstens deels zichtbaar, dan wordt het criterium als bestaan beschouwd.
Beispiele
Fokus hinter der klebenden Kopfzeile
header { position: sticky; top: 0; height: 80px; }
/* Tab scrollt das Element unter den Header */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.
- Tab door uw pagina en kijk naar de onderkant van het scherm — verdwijnt de focus nu en dan achter de cookieverklaring?
- Houd vaste balken zo smal mogelijk, vooral op kleine schermen.
- Vraag uw bureau bij focus voorzien in scrollafstand, zodat het actieve element nooit onder vaste balken terechtkomt.
- Test met de zichtbare cookieverklaring — precies in deze toestand beleven eerste bezoekers uw pagina.