Succescriterium 2.1.1 Toetsenbord
Alle functionaliteit van de content is bedienbaar via een toetsenbordinterface zonder dat afzonderlijke toetsaanslagen aan tijd gebonden zijn, behalve als de onderliggende functie een invoer vereist die afhangt van het pad dat de gebruiker aflegt en niet alleen van de eindpunten.
Noot 1Deze uitzondering is gerelateerd aan de onderliggende functie, niet aan de invoertechniek. Als we bijvoorbeeld met de hand geschreven tekst invoeren, vereist de invoertechniek (met de hand geschreven tekst) pad-afhankelijke invoer, maar de onderliggende functie (tekstinvoer) vereist dat niet.
Noot 2Dit succescriterium verbiedt geen muisinvoer of andere invoermethoden naast de toetsenbordinvoer en wil dit ook niet ontmoedigen.
Toetsenbord begrijpen (Engelstalig)
Niet iedereen kan een muis gebruiken. Mensen met een visuele beperking zien de muisaanwijzer bijvoorbeeld niet (of niet goed). Anderen kunnen door een fysieke of motorische beperking moeite hebben met nauwkeurige bewegingen. Zij bedienen de computer met het toetsenbord, of met software die werkt als een toetsenbord. Denk aan spraakbesturing, een schermtoetsenbord of een schakelaar.
Zorg daarom dat alle functionaliteit van je website (ook) te bedienen is met een toetsenbord. Hieronder vallen onder andere links, knoppen en formulierelementen, maar ook functies die met slepen werken.
De bediening mag niet aan tijd gebonden zijn. Niemand hoeft dus snel achter elkaar op een toets te drukken, of een toets lang ingedrukt te houden.
Let op: Het succescriterium vereist niet dat elk bedieningselement afzonderlijk met het toetsenbord te bedienen is. Het gaat erom dat toetsenbordgebruikers dezelfde of vergelijkbare acties kunnen uitvoeren.
Er is een uitzondering voor functionaliteit die afhangt van het hele pad dat de gebruiker aflegt, en niet alleen van het begin- en eindpunt. Denk aan tekenen uit de vrije hand of schilderen met een penseel. (Tekst invoeren met handschrift valt niet onder de uitzondering: de functie is tekst invoeren en dat kan ook met toetsen.)
Hoe pas je dit toe?
- Zorg dat alle functionaliteit te bereiken en te bedienen is met alleen het toetsenbord.
- Laat geen functie afhangen van snel achter elkaar drukken of een toets lang ingedrukt houden.
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 schermlezer gebruiken.
- Mensen die blind of slechtziend zijn.
Wie is verantwoordelijk?
Hoe toets je dit?
Benodigdheden
- Minimaal twee verschillende browsers (bijvoorbeeld Chrome en Firefox)
- Optioneel: Stylus browser-extensie
- In combinatie met mijn CSS-stijl: Maak focus zichtbaar
- Als de standaard focusindicator niet duidelijk zichtbaar is
Uitzonderingen
Uitzonderingen zijn:
- functies die invoer nodig hebben die afhangt van het pad van de beweging en niet alleen van de eindpunten, zoals tekenen uit de vrije hand
Testprocedure
Test 1: Toetsenbord
- Verken de pagina met muis en toetsenbord
- Bepaal welke bedieningselementen en andere functionaliteit er zijn:
- Links
- Knoppen
- Formulierelementen (invoervelden, tekstgebieden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars)
- Navigaties en subnavigaties
- Accordeons of andere elementen die kunnen uitvouwen en samenvouwen
- Dialoogvensters
- Carrousels
- Tabbladen
- Mediaspelers
- Functies die werken met slepen (bijvoorbeeld sorteren, verplaatsen en uploaden)
- Content die verschijnt bij hover (bijvoorbeeld tooltips)
- Elementen met scrollbare inhoud
- Maatwerk bedieningselementen
- Bepaal welke bedieningselementen en andere functionaliteit er zijn:
- Herlaad de pagina
- Navigeer met alleen het toetsenbord en controleer:
- Of alle functionaliteit te bereiken is met het toetsenbord (bijvoorbeeld met Tab, Shift + Tab of de pijltoetsen)
- Of alle functionaliteit te bedienen is met het toetsenbord
- Of de content in elk scrollbaar element te scrollen is met het toetsenbord (bijvoorbeeld met de pijltoetsen)
- Of content die verschijnt bij hover ook te tonen is met het toetsenbord
- Of alle functionaliteit te bedienen is zonder een toets snel achter elkaar of lang in te drukken
- Herhaal stap 2 en 3 in een andere browser
Belangrijk om te weten
- Toetsenbordbediening hoeft niet precies hetzelfde te zijn als muisbediening. Het gaat erom dat dezelfde functionaliteit beschikbaar is, ook al zijn er meer stappen nodig of zijn de stappen anders.
- Niet elk bedieningselement hoeft zelf de focus te krijgen. Een verzendknop zonder focus is geen fout als Enter in het invoerveld het formulier verstuurt.
- Enter voor links en Enter of de spatiebalk voor knoppen zijn afspraken, geen eisen. Werkt een knop alleen met Enter, of met een andere toets? Dan voldoet hij aan dit succescriterium.
- Muistoetsen tellen niet als bediening met het toetsenbord. Muistoetsen sturen de muis aan, niet de toetsenbordinterface.
Beoordeling
- Alle functionaliteit moet bereikbaar zijn met alleen het toetsenbord
- Alle functionaliteit moet bedienbaar zijn met alleen het toetsenbord
- Bediening met het toetsenbord moet geen specifieke timing van toetsaanslagen vereisen