WCAG-succescriterium 2.1.1 Toetsenbord

Niveau A

Uitleg

Zorg dat alle functionaliteit met een toetsenbord te bedienen is.

Alle functionaliteit moet bedienbaar zijn met een toetsenbord zonder dat afzonderlijke toetsaanslagen aan tijd gebonden zijn.

Uitgezonderd zijn functies die niet met het toetsenbord zijn uit te voeren, zoals het invoeren van met de hand geschreven tekst.

Gerelateerde NL Design System-richtlijnen

Formulieren - Toetsenbord: Zorg dat het formulier werkt met een toetsenbord.
Formulieren - Toetsenbord: Gebruik geen positieve tabindex.
Formulieren - Buttons: Toetsenbordbediening van een button.
Formulieren - Buttons: Disabled submitbuttons.
Formulieren - Foutmeldingen: Zet een samenvatting van de foutmeldingen boven het formulier.
Formulieren - Wanneer gebruik je welk formulierelement: Zorg dat iedereen een formulierelement kan bedienen of geef een alternatief.

Bronnen

A Guide To Keyboard Accessibility: HTML And CSS by Cristian Díaz in Smashing Magazine.
The problem with automatically focusing the first input and what to do instead van Adam Silver.
Tabindex: 0 and -1 Values van WebAIM.
How To Avoid Breaking Web Pages For Keyboard Users van Andrew Nevins.

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

Hoe te testen

Een website testen met een toetsenbord is essentieel bij het controleren van de toegankelijkheid. Hierbij is een aantal testen belangrijk:

werkt alle functionaliteit met een toetsenbord?
is de tabvolgorde logisch en voorspelbaar?
is alles goed bereikbaar, ook als je inzoomt?
verplaatst de toetsenbordfocus zich goed bij het openen van een menu of dialog?
is er geen "toetsenbordval"? Dat betekent: kun je met Tab-navigatie door naar de rest van de pagina, of kom je in een loop terecht waardoor je niet verder komt?

Hoe toetsenbordnavigatie werkt, is beschreven op Keyboard testing van WebAIM.

Zorg dat de instellingen van de MacOS en browsers goed staan:

Werkt alle functionaliteit met een toetsenbord

Controleer of links en buttons focus krijgen en doen wat ze moeten doen. Bijvoorbeeld: een menu openen, een dialog openen of sluiten, een accordeon openen en sluiten.
Controleer dat je buttons op beide manieren kan activeren: met Space en met Enter.
Doe alle testen op de verschillende weergaves van een website, door bijvoorbeeld in te zoomen en nogmaals te testen.

Toetsenbordfocus

Tab door de website en controleer of de focus volgorde logisch en voorspelbaar is. De logische volgorde van Nederlandse websites is meestal: van boven naar beneden, van links naar rechts.
Controleer of het onderdeel met focus en de focus-ring niet verborgen zit achter een ander element.
Controleer of de focus niet ineens verdwijnt (weer bovenaan de pagina staat) na het uitvoeren van een actie.
Wanneer de focus zich verplaatst naar een dialog die wordt geopend, kun je dan de dialog weer sluiten met het toetsenbord en met de Escape toets? Wanneer de dialog gesloten wordt, komt de focus weer terug op de "open dialog"-button?

W3C referenties

Engelse tekst van het WCAG-succescriterium: 2.1.1 Keyboard.
Nederlandse vertaling van het WCAG-succescriterium: 2.1.1 Toetsenbord.
Engelstalige informatie op How to Meet WCAG: Quick Reference 2.1.1 Keyboard.
Engelstalige toelichting: Understanding SC 2.1.1 Keyboard.

Belangrijk: De richtlijnen van NL Design System zijn niet verplicht en zijn geen vervanging voor de wettelijk geldende WCAG 2.1 specificatie.

Ons doel is om praktische uitleg en voorbeelden te geven die helpen bij het toegankelijk inzetten van de NL Design System componenten, patronen en richtlijnen. We doen dat op basis van een interpretatie van de nieuwe WCAG 2.2 specificatie.

Weten waar je volgens de wet aan moet voldoen? Ga dan naar wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

Deze pagina's over WCAG worden onderhouden door het NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.