Voor gebruikers die met het toetsenbord navigeren, is het cruciaal dat ze altijd kunnen zien waar de focus zich bevindt. Als de focus-indicator wordt bedekt door andere elementen of uit beeld verdwijnt, kan dit voor grote verwarring zorgen. Gebruikers kunnen dan vastlopen of de context van de pagina kwijtraken.
Daarom zegt WCAG: zorg dat de focus-indicator altijd zichtbaar blijft en niet wordt bedekt door andere elementen.
Dit heet 2.4.11 Focus Appearance (Minimum).
Wat wordt er van websites verwacht?
- De focus-indicator moet altijd zichtbaar blijven:
- Niet bedekt worden door andere elementen,
- Niet verschoven worden naar een onzichtbaar deel van de pagina,
- Niet verdwijnen door scroll- of andere lay-outproblemen.
Kort: gebruikers moeten altijd kunnen zien waar de focus is, zonder afleiding of blokkades.
Wat is niet verplicht?
- Decoratieve elementen of content die geen focus kan ontvangen hoeven geen focus-indicator te hebben.
- Focus-indicatoren mogen visueel aangepast worden, zolang ze maar niet bedekt worden.
Veelgemaakte fouten
- Pop-ups of modals die de focus blokkeren of bedekken.
- Sticky headers of voetnoten die de focus overlappen.
- Dynamische lay-outs die de focus verplaatsen naar een onzichtbaar deel van de pagina.
Wat kun je als webredacteur of manager doen?
- Test je site met alleen toetsenbordnavigatie (Tab en Shift-Tab): Kan de focus altijd vrij bewegen zonder te worden geblokkeerd?
- Controleer modals en overlays: Blijven ze de focus respecteren, zonder deze te verbergen?
- Vraag je webbouwer: Zijn focusstijlen correct ingesteld, zonder onbedoelde overlappingen?
Samenvatting
Zorg dat gebruikers altijd kunnen zien waar ze zijn op je site. De focus moet zichtbaar, vrij en onbedekt blijven, ongeacht hoe je pagina’s worden ingedeeld.