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.
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. Voor hen is het toetsenbord een uitkomst om de computer te gebruiken.
Zorg er daarom voor dat alle functionaliteit van de content (ook) te bedienen is met een toetsenbord. Hieronder vallen onder andere links, knoppen en formulierelementen.
Er is een uitzondering voor functionaliteit die afhangt van het pad dat de gebruiker aflegt, zoals het invoeren van geschreven tekst.
Hoe pas je dit toe?
- Zorg dat alle functionaliteit te bereiken is met alleen het toetsenbord.
- Zorg dat alle functionaliteit te bedienen is met alleen het toetsenbord.
- Zorg dat bediening met het toetsenbord niet aan tijd gebonden is.
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) |
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?
- Ontwikkelaar
Hoe toets je dit?
Benodigdheden
- Minimaal twee verschillende browsers (bijvoorbeeld Chrome en Firefox)
- Viewport ingesteld op 1280px bij 1024px
- Eventueel ook de Stylus browser-extensie met de stijlen:
Blauw
a:focus,
*:focus {
outline: 4px solid royalblue !important;
outline-offset: 1px !important;
}Groen
a:focus,
*:focus {
outline: 4px solid limegreen !important;
outline-offset: 1px !important;
}Rood
a:focus,
*:focus {
outline: 4px solid crimson !important;
outline-offset: 1px !important;
}Testprocedure
- Open de te testen webpagina
- Verken de pagina met een muis
- Bepaal welke bedieningselementen er allemaal zijn
- Probeer alle bedieningselementen uit
- Links
- Knoppen
- Formulierelementen (invoervelden, keuzelijsten, selectievakjes, keuzerondjes, schuifregelaars, schuifbalken, enz.)
- Navigaties en subnavigaties
- Accordeons of andere elementen die kunnen uitvouwen en samenvouwen
- Dialoogvensters
- Carrousels
- Tabbladen
- Mediaspelers
- enz.
- Gebruik nu alleen het toetsenbord en controleer
- Of alle bedieningselementen te bereiken zijn met Tab, Shift + Tab en/of pijltoetsen
- Of alle bedieningselementen te bedienen zijn met Enter of Spatie
- Als bedieningselementen niet met het toetsenbord te bereiken of te bedienen zijn:
- Controleer dan of er op dezelfde pagina een gelijkwaardig alternatief is dat wél met toetsenbord werkt
- Controleer dan of er een duidelijke link staat naar een alternatieve toegankelijke versie op een andere pagina
- Herhaal stap 3 en 4 in een andere browser
Beoordeling
- Alle functies moeten bereikbaar zijn met alleen het toetsenbord
- Alle functies moeten bedienbaar zijn met alleen het toetsenbord