Succescriterium 2.1.2 Geen toetsenbordval
Als de toetsenbordfocus met de toetsenbordinterface verplaatst kan worden naar een component van de pagina, dan kan de focus ook met alleen de toetsenbordinterface weer van dat component weg worden bewogen. En, als er meer nodig is dan de standaard pijl- of tabtoetsen of andere standaard methoden om de focus te verplaatsen, dan wordt de gebruiker geïnformeerd over de manier waarop de focus kan worden verplaatst.
NootOmdat content die niet aan dit succescriterium voldoet het vermogen van een gebruiker om de hele pagina te gebruiken kan belemmeren, moet alle content op de webpagina (ongeacht of deze gebruikt wordt om aan andere succescriteria te voldoen of niet) voldoen aan dit succescriterium. Zie Conformiteitseis 5: Non-interferentie.
Geen toetsenbordval begrijpen (Engelstalig)
Een toetsenbordval ontstaat als iemand met het toetsenbord ergens naartoe navigeert, maar er niet meer van weg kan komen of niet weet hoe. Dit is soms een probleem bij:
- ingesloten content (zoals zoals mediaspelers en kaarten)
- social media widgets (ingesloten feeds)
- rich text editors
- maatwerk componenten
Soms is het de bedoeling dat de focus binnen een onderdeel blijft, bijvoorbeeld in een (modaal) dialoogvenster. Dat is geen toetsenbordval, zolang je het venster met het toetsenbord kunt sluiten.
Als een onderdeel speciale toetsen nodig heeft om te verlaten, moet je dit duidelijk vermelden.
Hoe pas je dit toe?
- Zorg dat een gebruiker met het toetsenbord altijd weg kan navigeren van elk element.
- Is er een andere toets nodig dan Tab, Shift + Tab, Escape of de pijltoetsen? Vertel dan welke toets dat is. Zet die instructie zichtbaar bij het onderdeel, bij voorkeur ervóór.
- Test ingesloten content van een andere partij, zoals een kaart of video, ook met het toetsenbord.
Navigeren met het toetsenbord
| Taak | Toets |
|---|---|
| Naar het volgende bedieningselement | Tab |
| Naar het vorige bedieningselement | Shift + Tab |
| Link activeren | Enter |
| Knop activeren | Enter of Spatie |
| Selectievakje selecteren | Spatie |
| Navigeren tussen keuzerondjes | ↑ (pijltje naar boven) en ↓ (pijltje naar beneden) |
| Keuzerondje selecteren | Spatie |
| Keuzelijst openen | Spatie |
| Navigeren in een keuzelijst | ↑ (pijltje naar boven) en ↓ (pijltje naar beneden) |
| Element sluiten | Escape |
| Scrollen | ↑ (pijltje naar boven) en ↓ (pijltje naar beneden) |
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 visuele beperking hebben.
Wie is verantwoordelijk?
Hoe toets je dit?
Benodigdheden
- Minimaal twee verschillende browsers (bijvoorbeeld Chrome en Firefox)
Testprocedure
Test 1: Toetsenbordvallen
- Verken de pagina met toetsenbord
- Bepaal welke componenten de focus kunnen krijgen (zie ook 2.1.1 Toetsenbord)
- Bepaal of er ingesloten content is (bijvoorbeeld mediaspelers, kaarten, social media feeds of andere iframes)
- Bepaal welke componenten pas na activering verschijnen (bijvoorbeeld dialoogvensters en uitklapmenu’s)
- Herlaad de pagina
- Navigeer met alleen het toetsenbord naar elk component, ook naar componenten die pas na activering verschijnen, en controleer:
- Of de focus van het component naar de rest van de pagina te verplaatsen is met Tab, Shift + Tab, Escape of een pijltoets
Let op: Alleen als de focus in een component blijft.
- Controleer voor elk component waar de focus in blijft of minstens één van de volgende waar is:
- Of het component een modaal dialoogvenster is dat te sluiten is met een knop in het dialoogvenster
- Of er een instructie is die een andere toets noemt om het component te verlaten
- Test voor elk component met een instructie de genoemde toets en controleer:
- Of de focus met die toets naar de rest van de pagina te verplaatsen is
- Of de instructie te bereiken en te lezen is met alleen het toetsenbord
- Herhaal stap 3 tot en met 5 in een andere browser
Belangrijk om te weten
- Een component is bij dit succescriterium elk deel van de pagina, niet alleen een los bedieningselement. Een toetsenbordval zit meestal in een groep elementen, zoals een iframe of een maatwerk component.
- Escape geldt als standaard manier om een component te verlaten, net als Tab, Shift + Tab en de pijltoetsen. Een component dat met Escape te verlaten is, heeft daarom geen instructie nodig.
Beoordeling
- Voor alle componenten die de focus kunnen krijgen, moet minstens één van de volgende zaken gelden:
- De focus kan van het component naar de rest van de pagina worden verplaatst met Tab, Shift + Tab, Escape of een pijltoets
- Alleen bij een modaal dialoogvenster: het dialoogvenster is te sluiten met een knop in het dialoogvenster
- De focus kan met een andere toets naar de rest van de pagina worden verplaatst en de gebruiker wordt geïnformeerd over die toets
Non-interferentie
Dit criterium geldt voor alle content op je pagina. Ook voor van derden afkomstige content, voor content die expliciet wordt uitgesloten in de scope van een WCAG-onderzoek en voor content met een toegankelijk alternatief.
Lees meer over non-interferentie