WCAG-succescriterium 2.4.11 Focus niet bedekt (minimum)

Niveau AA

In het kort

Doel

Houd een gefocussed onderdeel zichtbaar.

Wat te doen

Zorg ervoor dat een onderdeel met toetsenbordfocus minstens deels zichtbaar is.

Waarom het belangrijk is

Wat toetsenbordfocus heeft moet zichtbaar zijn voor mensen die een toetsenbord gebruiken.

Uitleg

Een onderdeel dat toetsenbordfocus heeft mag niet volledig bedekt zijn.

Dit criterium kan makkelijk fout gaan als een pagina in een onverwachte vorm is. Een ontwerp houdt niet altijd rekening met alle interacties die plaats kunnen vinden:

• Een interactieve footer kan achter een cookie consent modal zitten.
• Een uitklapmenu kan een link bedekken.
• Een verandering in resolutie of zoom kan er voor zorgen dat onderdelen die sticky zijn ineens overlappen.
• Een verplaatstbaar onderdeel kan ergens over of onder geplaatst worden.

Hoe te testen

• Ga door een pagina met het toetsenbord.
• Kijk welke onderdelen de focus krijgen.
• Controleer of de focus (deels) zichtbaar is.
• Doe dit ook voor andere vormen van de pagina zoals:
  • Met een open cookie consent modal.
  • Met opengeklapte menus.
  • Op verschillende resoluties.
  • Met geopende modals of andere overlappende content.
  • Met foutmeldingen.

Tips

• In plaats van deels zichtbaar kun je beter onderdelen helemaal zichtbaar laten zijn. Je voldoet dan aan WCAG-succescriterium 2.4.12 Focus niet bedekt (uitgebreid)
• Zodra je dit criterium test, kun je meteen WCAG-succescriterium 2.1.1 Toetsenbord en WCAG-Succescriterium 2.4.7 Focus zichtbaar testen.

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

W3C referenties

• Engelse tekst van het WCAG-succescriterium: 2.4.11 Focus Not Obscured (Minimum).
• Nederlandse vertaling van het WCAG-succescriterium: 2.4.11 Focus niet bedekt (minimum).
• Engelstalige informatie op How to Meet WCAG: Quick Reference 2.4.11 Focus Not Obscured (Minimum).
• Engelstalige toelichting: Understanding SC 2.4.11 Focus Not Obscured (Minimum).

Wat is verplicht?

De richtlijnen zijn geen wettelijke verplichting of vervanging voor WCAG. Ze zijn een praktische uitleg met voorbeelden die helpen bij het toegankelijk inzetten van NL Design System. Meer informatie of de wettelijke verplichting staat op de pagina wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

Aanvullingen of opmerkingen?

Deel je mening op GitHub of bezoek onze actieve community op Slack.