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).

Belangrijk: De richtlijnen van NL Design System zijn geen wettelijke verplichting

De richtlijnen van NL Design System zijn niet wettelijk verplicht en zijn geen vervanging voor de wettelijk geldende WCAG 2.1 specificatie.

Ons doel is om praktische uitleg en voorbeelden te geven die helpen bij het toegankelijk inzetten van de NL Design System componenten, patronen en richtlijnen. We doen dat op basis van een interpretatie van de nieuwe WCAG 2.2 specificatie.

Weten waar je volgens de wet aan moet voldoen? Ga dan naar wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

Deze pagina's over WCAG worden onderhouden door NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.