Direct naar de inhoud

Zorg dat een vaste balk de toetsenbordfocus niet bedekt

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.

Terug naar boven