WCAG-succescriterium 2.1.2 Geen toetsenbordval

Niveau A

Een interactief onderdeel moet je met het toetsenbord kunnen verlaten.

Als je niet verder of terug kan navigeren, dan werkt een pagina niet voor een toetsenbord. En als een pagina niet werkt voor een toetsenbord, dan werkt het ook niet voor technieken die werken als een toetsenbord. Websites zijn vaak ingericht op het gebruik van een touchscreen of een muis. Deze apparaten worden veel gebruikt, maar niet iedereen kan deze apparaten gebruiken. Een website moet daarom ook werken voor andere apparaten en technieken.

Uitleg

WCAG-succescriterium 2.1.1 eist dat je interactieve elementen kan bereiken met het toetsenbord. Dit succescriterium eist dat je na het bereiken van een interactief element niet vast zit. Je moet verder of terug kunnen navigeren.

Interactieve elementen mogen navigatie met het toetsenbord niet tegenhouden. Als dit wel gebeurt zit je vast als gebruiker. Dan is de pagina verder niet bruikbaar. Dit wordt in het Engels een keyboardtrap genoemd. In het Nederlands noemen we dit een toetsenbordval.

Voordelen

Het toetsenbord zelf is een veel gebruikt hulpmiddel voor mensen met een beperking. Niet iedereen kan een muis of andere invoerapparaten gebruiken. Dit criterium is ook voor tal van apparaten die werken als een toetsenbord. Dit zijn bijvoorbeeld een screenreader of een eenfunctieschakelaar. Screenreaders worden vooral gebruikt door mensen met een visuele beperking, maar ook door mensen met cognitieve beperkingen. Daarnaast zijn er tal van hulpmiddelen zoals de eenfunctieschakelaar die gebruikt worden door mensen met motorische beperkingen.

Werkende toetsenbordbediening helpt mensen met beperkingen maar ook andere mensen. Dit zijn bijvoorbeeld power users en mensen regelmatige bezoekers die sneller werken met een toetsenbord.

Hoe te testen

Lees in de uitleg van WCAG-succescriterium 2.1.1 Toetsenbord hoe een toetsenbord zou moeten werken.

Voor elk onderdeel dat je met het toetsenbord kan bereiken moet het volgende kloppen:

Na het bereiken met het toetsenbord kan de focus ook weer weggehaald worden.

Gebruik standaardtoetsen zoals tab, shift-tab, escape en pijltjestoetsen om weg te navigeren. Werkt dit niet? Het mag ook met andere toetsen werken. Als andere toetsen nodig zijn, dan moet dit op de pagina staan.

Veelgemaakte fouten

Een openvouwend onderdeel krijgt en houdt de focus

Dit probleem kan opgelost worden door developers.

Probleem

Een onderdeel dat openvouwt is bereikbaar met het toetsenbord. Het is vervolgens niet weer te verlaten met het toetsenbord. Dit kan zijn omdat het onderdeel niet te sluiten is, of omdat er niet uit te navigeren is.

Oplossing

Zorg ervoor dat een onderdeel dat opent en de focus krijgt ook weer te sluiten is met het toetsenbord. Als het onderdeel niet te sluiten is, zorg dan dat de focus weer weggehaald kan worden.

Scrollen lijkt oneindig door te gaan

Dit probleem kan opgelost worden door designers.

Probleem

Een pagina scrollt oneindig door, doordat er steeds nieuwe inhoudt verschijnt. Dit staat ook wel bekend als infinite scrolling. Als dit gebeurt kan de bezoeker niet voorbij het scrollende deel komen met het toetsenbord. Dit is ook een probleem als de pagina niet oneindig scrollt maar wel die indruk geeft.

Oplossing

Zorg voor paginering. Zonder infinite scroll is er geen probleem.

Een andere oplossing is het toevoegen van een Skip Link. Deze moet staan voor de scrollbare content. De gebruiker moet hiermee de scrollbare content voorbij gaan.

Gerelateerde NL Design System-richtlijnen en WCAG criteria

Binnen NL Design System is meer geschreven over dit criterium en onderwerpen die ermee te maken hebben. Met deze context kun je nog praktischer met dit criterium aan de slag. Je kan meerdere problemen tegelijk oplossen, en de gebruikerservaring breder verbeteren.

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 - Wanneer gebruik je welk formulierelement: Zorg dat iedereen een formulierelement kan bedienen of geef een alternatief.

WCAG richtlijnen

Deze WCAG richtlijnen gaan ook over het gebruik van een toetsenbord. Het kan praktisch zijn om deze tegelijk te bekijken en te beoordelen.

Bronnen

Smashing Magazine zet uiteen welke HTML en CSS praktisch is bij gebruik van het toetsenbord: A Guide To Keyboard Accessibility: HTML And CSS
WebAIM (Web Accessibility In Mind) legt uit hoe tabindex gebruikt moet worden: Tabindex: 0 and -1 Values
Toegankelijkheidsbureau TPGi schrijft over mogelijke problemen die bezoekers met een toetsenbord tegenkomen: How To Avoid Breaking Web Pages For Keyboard Users
De W3C heeft een uitgebreid artikel over wat er allemaal nodig is voor het toetsenbord: Developing a Keyboard Interface
De W3C geeft aan waar op te letten bij het maken van maatwerk componenten: Custom Control Accessible Development Checklist

Officiële WCAG criteria

Engelse tekst van het WCAG-succescriterium: 2.1.2 No Keyboard Trap.
Nederlandse vertaling van het WCAG-succescriterium: 2.1.2 Geen toetsenbordval.
Engelstalige informatie op How to Meet WCAG: Quick Reference 2.1.2 No Keyboard Trap.
Engelstalige toelichting: Understanding SC 2.1.2 No Keyboard Trap.

Wat is verplicht?

Belangrijk: De richtlijnen van NL Design System zijn geen wettelijke verplichting

De richtlijnen van NL Design System zijn niet wettelijk 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.

Aanvullingen of opmerkingen?

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