Nieuw in WCAG 2.2
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.
Handige tips
- Als je zwevende of meebewegende content gebruikt, gebruik dan CSS scroll-padding.
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?
- Ontwikkelaar
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
Testprocedure
Test 1: Bedieningselementen
- 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 interactieve elementen er zijn
- Bepaal of er zwevende content is die kan worden geopend zijn:
- 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 de zwevende content kan worden gesloten terwijl focus op het bedekte element blijft:
- Met Escape-toets
- Met pijltjestoetsen om te scrollen
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.
Beoordeling
- Bedieningselementen die de focus hebben moeten niet volledig verborgen zijn door andere content