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.
Noot 1Waar content in een configureerbare interface door de gebruiker kan worden verplaatst, worden alleen de oorspronkelijke posities van door de gebruiker verplaatsbare content beoordeeld bij testen en conformiteit met dit succescriterium.
Noot 2Content die de gebruiker opent, kan de component die focus ontvangt bedekken. Als de gebruiker de gefocuste component zichtbaar kan maken zonder de toetsenbordfocus te verplaatsen, wordt de component met focus niet beschouwd als bedekt door de content die door de auteur is gecreëerd.
Focus niet bedekt (minimum) begrijpen (Engelstalig)
Krijgt een bedieningselement de toetsenbordfocus? Dan mag het niet volledig bedekt worden door andere content op de pagina. Minstens een deel van het element moet op dat moment zichtbaar zijn.
Dit gaat vaak mis bij content die op een vaste plek blijft staan als je scrolt, zoals:
- sticky headers en sticky footers
- cookiemeldingen
- chatvensters en niet-modale dialoogvensters
- zwevende knoppen, zoals een back-to-top-knop
Heb je de content zelf geopend, zoals een chatvenster? Dan mag die content het element wel bedekken. Voorwaarde is dat je het element weer zichtbaar kunt maken zonder de focus te verplaatsen. Bijvoorbeeld door de content te sluiten met Escape.
Hoe pas je dit toe?
- Zorg dat een bedieningselement met focus niet volledig verborgen is 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 kan verplaatsen: 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
- Laat een cookiemelding openstaan
- Verken de pagina met muis en toetsenbord
- Bepaal welke bedieningselementen er zijn
- Bepaal of er meebewegende content is:
- Sticky headers en sticky footers
- Cookiemeldingen
- Zwevende knoppen (bijvoorbeeld een chatknop of een back-to-top-knop)
- Bepaal of er zwevende content is die de gebruiker kan openen:
- Submenu’s
- Chatvensters
- Niet-modale dialoogvensters
- Toggletips
- Navigeer met alleen het toetsenbord (Tab) van het eerste tot het laatste focusbare element en controleer voor elk element dat de focus krijgt:
- Of het element niet volledig wordt bedekt door andere content
- Navigeer met alleen het toetsenbord (Shift + Tab) van het laatste tot het eerste focusbare element en controleer voor elk element dat de focus krijgt:
- Of het element niet volledig wordt bedekt door andere content
Zwevende content die de gebruiker opent
- Open de zwevende content
- Navigeer met Tab en Shift + Tab van de zwevende content naar de rest van de pagina en controleer voor elk element dat de focus krijgt:
- Of het element niet volledig wordt bedekt door de zwevende content
Let op: Alleen als een element in stap 6 volledig wordt bedekt.
- Test of het bedekte element zichtbaar te maken is zonder de focus te verplaatsen en controleer of minstens één van de volgende waar is:
- Of de zwevende content te sluiten is met Escape
- Of het element in beeld te scrollen is met de pijltoetsen
- Herhaal stap 3 tot en met 7 in een andere browser
Belangrijk om te weten
- Het moment waarop een element de focus krijgt, is bepalend. Is het element dan deels zichtbaar, dan voldoet het. Wordt het element daarna bedekt doordat de pagina verder scrolt, dan is dat geen probleem.
- Het succescriterium kijkt naar het bedieningselement zelf, niet naar de focusindicator. Steekt alleen de focusindicator nog onder een sticky header uit, dan is het bedieningselement volledig bedekt. Dit geldt niet als de focusindicator binnen het bedieningselement valt, of als de focus zichtbaar is doordat het bedieningselement zelf verandert. Is de focusindicator bedekt, controleer dan ook 2.4.7 Focus zichtbaar.
Beoordeling
- Voor alle bedieningselementen die de focus krijgen, moet minstens één van de volgende zaken gelden:
- Het bedieningselement wordt niet volledig bedekt door content die door de auteur is gecreëerd
- Alleen bij content die de gebruiker zelf heeft geopend: het bedekte bedieningselement is zichtbaar te maken zonder de focus te verplaatsen