Een pagina met het toetsenbord gebruiken

Koppel de muis los en druk op Tab: elke link, knop en elk veld moet om beurten oplichten, in de leesvolgorde van de pagina.

Wie het toetsenbord gebruikt

Veel mensen raken nooit een muis aan. Sommigen kunnen die niet stilhouden; anderen gebruiken een schakelaar, mondstok of spraakherkenning die toetsaanslagen verstuurt; ook schermlezergebruikers bewegen meestal met het toetsenbord. WCAG 2.2-succescriterium 2.1.1 Toetsenbord, niveau A, zegt dat alles op de pagina met een toetsenbord moet werken. Criterium 2.1.2 Geen toetsenbordval voegt toe dat als de focus een paginadeel kan binnengaan, die er ook weer met het toetsenbord uit moet kunnen.

Gebruik elementen die al werken

Links met een href, button, input, select en textarea kunnen meteen focus krijgen en reageren op de juiste toetsen. Een div met een klikhandler niet: je bereikt die niet met Tab, Enter doet niets en een schermlezer kondigt die niet als knop aan. Het MDN-advies is duidelijk. Gebruik geen tabindex om een div als knop te laten werken; gebruik het button-element, met de rol en het toetsenbordgedrag al ingebouwd.

Focusvolgorde en tabindex

De Tab-volgorde volgt de elementvolgorde in de HTML-bron. Criterium 2.4.3 Focusvolgorde vraagt dat die volgorde de betekenis en het gebruik van de pagina intact houdt. De eenvoudigste oplossing voor een vreemde volgorde is dus de HTML herschikken. MDN noemt drie soorten tabindex-waarden. Nul zet een element in de normale volgorde. Een negatieve waarde, meestal -1, haalt het uit de Tab-volgorde, maar een script kan nog focus() aanroepen, handig voor een dialoog of foutmelding. Een positieve waarde dwingt het element vóór alle andere. MDN raadt alleen 0 en -1 aan omdat positieve waarden de volgorde moeilijk te volgen maken.

Zien waar je bent

Toetsenbordgebruikers moeten kunnen zien welk element focus heeft. Criterium 2.4.7 Focus zichtbaar, niveau AA, vraagt een zichtbare focusindicator. Een stylesheetregel zoals outline: none zonder vervanging voldoet dus niet. WCAG 2.2 voegde twee verwante criteria toe. 2.4.11 Focus niet bedekt (minimum), niveau AA, zegt dat het gefocuste item niet volledig verborgen mag zijn achter iets dat de maker toevoegde, zoals een vaste voettekst of cookiebanner. 2.5.8 Grootte van het aanwijsgebied (minimum), ook AA, vraagt dat klik- of tikdoelen minstens 24 bij 24 CSS-pixels zijn of voldoende ruimte eromheen hebben.

Nog een patroon helpt veel: de skiplink. Een site met een lang menu laat toetsenbordgebruikers op elke pagina met Tab door elk menu-item gaan. Een link als eerste op de pagina naar de hoofdinhoud laat ze er met één toetsaanslag voorbij springen. Die kan visueel verborgen zijn totdat de link focus krijgt.

Testen kost twee minuten. Klik in de adresbalk en druk herhaald op Tab door de hele pagina. Controleer of elk bedieningselement bereikbaar is, de volgorde bij de leesvolgorde past, je altijd ziet waar de focus is en Enter en Spatie hetzelfde doen als een muisklik. Druk dan op Shift+Tab om terug te gaan. Elk onbereikbaar bedieningselement of elke plek waar de focus verdwijnt is een fout.