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
Heeft de gebruiker de content zelf geopend, zoals een chatvenster? Dan mag die content het element wel bedekken. Voorwaarde is dat de bezoeker het element weer zichtbaar kan maken zonder de focus te verplaatsen. Bijvoorbeeld door de content te sluiten met Escape.
Hoe pas je dit toe?
- Geef sticky headers en sticky footers ruimte met de CSS-eigenschap
scroll-padding. Daarmee houd je een strook vrij aan de boven- of onderkant van het scherm. De browser scrollt een element met focus dan niet meer onder de header of footer. - Laat een cookiemelding de content niet bedekken. Of maak er een venster van dat de bezoeker eerst moet sluiten voordat de rest van de pagina werkt.
- Zorg dat content die de bezoeker zelf opent en die open blijft staan, zoals een chatvenster, te sluiten is met Escape. Ook als de focus al buiten die content staat.
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 van die content telt mee
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 (zie ook 2.1.1 Toetsenbord)
- Bepaal welke content over de pagina heen ligt zonder dat de gebruiker die opent:
- Sticky headers en sticky footers
- Cookiemeldingen
- Zwevende knoppen (bijvoorbeeld een chatknop of een back-to-top-knop)
- Content die vanzelf verschijnt (bijvoorbeeld een melding of een pop-up)
- Bepaal welke content de gebruiker kan openen en die openblijft tot die wordt gesloten:
- Chatvensters
- Niet-modale dialoogvensters
- Uitklapbare zijnavigaties en feedbackpanelen
- Bepaal welke content de gebruiker kan openen en die hoort te sluiten als de focus weggaat:
- Submenu’s
- Keuzelijsten en andere uitklaplijsten
- Toggletips
- Datumkiezers
Content die de gebruiker niet opent
- Navigeer met Tab van het eerste naar het laatste bedieningselement en controleer voor elk bedieningselement dat de focus krijgt:
- Of het bedieningselement niet volledig wordt bedekt door andere content
- Navigeer met Shift + Tab van het laatste naar het eerste bedieningselement en controleer voor elk bedieningselement dat de focus krijgt:
- Of het bedieningselement niet volledig wordt bedekt door andere content
Content die de gebruiker opent
- Open één onderdeel dat de gebruiker kan openen
- Navigeer met Tab en Shift + Tab vanuit de geopende content naar de rest van de pagina en controleer voor elk bedieningselement dat de focus krijgt:
- Of het bedieningselement niet volledig wordt bedekt door de geopende content
Let op: Alleen als de geopende content een bedieningselement volledig bedekt.
- Test het zichtbaar maken van het bedekte bedieningselement zonder de focus te verplaatsen en controleer of minstens één van de volgende waar is:
- Of de geopende content te sluiten is met Escape, waarbij de focus op het bedekte bedieningselement blijft staan
- Of het bedieningselement zichtbaar te maken is door te scrollen met het toetsenbord (bijvoorbeeld met de pijltoetsen)
- Herhaal stap 5 tot en met 7 voor de andere onderdelen die de gebruiker kan openen
Andere browser
- Herhaal stap 3 tot en met 8 in een andere browser
Belangrijk om te weten
- Het moment waarop een bedieningselement de focus krijgt, is bepalend. Is het bedieningselement dan deels zichtbaar, dan voldoet het. Wordt het element daarna bedekt doordat de pagina verder scrolt, dan is dat geen probleem. Content die vanzelf verschijnt nadat het bedieningselement de focus heeft gekregen, mag het bedieningselement wel niet volledig bedekken.
- Een sticky header bedekt vooral bedieningselementen bij terugnavigeren met Shift + Tab. Een sticky footer bedekt ze vooral bij vooruitnavigeren met Tab. Daarom worden beide richtingen getest.
- Submenu’s, keuzelijsten, toggletips en datumkiezers horen te sluiten zodra de focus weggaat. Blijven ze open en bedekken ze een bedieningselement volledig, dan voldoet dat alleen als het bedieningselement zichtbaar te maken is zonder de focus te verplaatsen.
- Kan de gebruiker content verplaatsen, zoals een chatvenster? Dan telt alleen de beginpositie van die content.
- 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 en die openblijft tot die wordt gesloten: het bedekte bedieningselement is zichtbaar te maken zonder de focus te verplaatsen