Succescriterium 2.4.11 Focus niet bedekt (minimum)
Wanneer een component van de gebruikersinterface de toetsenbordfocus krijgt, wordt die component niet volledig bedekt door de content die door de auteur is gecreëerd.
Focus niet bedekt (minimum) begrijpen (Engelstalig)
Als iemand met het toetsenbord door een website navigeert, dan mag het element dat de focus heeft niet worden verborgen achter andere content. Denk hierbij aan zwevende of meebewegende content. Het element moet altijd gedeeltelijk zichtbaar zijn.
Onder zwevende of meebewegende content vallen onder andere:
- sticky headers en sticky footers
- uitklappende menu’s
- pop-ups zoals een cookiemelding
- meebewegende widgets zoals een chat of back-to-top-knoppen
Hoe pas je dit toe?
- Zorg dat een bedieningselement dat de focus heeft niet helemaal wordt verborgen achter andere content.
Lees het artikel over toetsenbordtoegankelijkheid
Voor wie is dit belangrijk?
- Mensen die alleen het toetsenbord gebruiken.
- Mensen die een fysieke of motorische beperking hebben.
- Mensen die een cognitieve, taal- of leerbeperking hebben.
Wie is verantwoordelijk?
Hoe toets je dit?
Benodigdheden
- Minimaal twee verschillende browsers (bijvoorbeeld Chrome en Firefox)
- Viewport ingesteld op 1280px bij 1024px
- Optioneel: Stylus browser-extensie
- In combinatie met mijn CSS-stijl: Maak focus zichtbaar
- Als de standaard focusindicator niet duidelijk zichtbaar is
Uitzonderingen
Uitzonderingen zijn:
- content die de gebruiker zelf opent mag het element met focus bedekken, zolang de gebruiker het element zichtbaar kan maken zonder de focus te verplaatsen
- voor content die de gebruiker kan verplaatsen telt alleen de oorspronkelijke positie
Testprocedure
Test 1: Zwevende of meebewegende content
- Open de te testen webpagina
- Stel de viewport in op 1280px bij 1024px
- Zorg dat de zoom op 100% staat
- Verken de pagina met toetsenbord en muis
- Bepaal welke bedieningselementen er zijn
- Bepaal of er zwevende content is die kan worden geopend:
- Submenu’s
- Chat widgets
- Message panels
- Toggletips
- Bepaal of er meebewegende content is:
- Sticky headers
- Sticky footers
- Cookie-banners
- Navigeer alleen met het toetsenbord (Tab) van het eerste tot het laatste focusbare element en controleer:
- Of minimaal een deel van het element zichtbaar blijft
- Of het element niet volledig wordt bedekt door meebewegende content
- Navigeer alleen met het toetsenbord (Shift + Tab) van het laatste tot het eerste focusbare element en controleer:
- Of minimaal een deel van het element zichtbaar blijft
- Of het element niet volledig wordt bedekt door meebewegende content
- Open verschillende zwevende content en controleer:
- Navigeer met Tab en Shift + Tab weg van de overlay
- Controleer:
- Of andere focusbare elementen volledig worden bedekt door de content
- Of het bedekte element zichtbaar te maken is zonder de focus te verplaatsen:
- Door de zwevende content te sluiten met de Escape-toets
- Door met de pijltoetsen te scrollen tot het element zichtbaar is
Belangrijk om te weten
- Het moment waarop een element focus krijgt, is bepalend. Als een element zichtbaar is op het moment dat het focus krijgt, dan voldoet dit. Wat er daarna gebeurt, maakt niet uit. Scroll je zelf weg en verdwijnt het gefocuste element onder een element? Dan is dat geen probleem.
- Let op: Het criterium kijkt naar het component zelf, niet naar de focusindicator. Dus stel: een knop verdwijnt volledig achter een sticky header, maar de outline van de focusindicator steekt er nog net bovenuit, dan is het component alsnog volledig bedekt.
Beoordeling
- Bedieningselementen die de focus krijgen moeten niet volledig verborgen worden door andere content
- Of, alleen voor content die de gebruiker zelf heeft geopend: het bedekte element moet zichtbaar te maken zijn zonder de focus te verplaatsen