Toetsenbordtoegankelijkheid
Toetsenbordtoegankelijkheid: zo werkt je website zonder muis
Veel bezoekers bedienen je website met het toetsenbord of een hulpmiddel in plaats van een muis. Je leest welke WCAG-eisen gelden voor toetsenbordbediening en focus, hoe je je website zelf test en hoe je veelvoorkomende problemen oplost.
Waarom toetsenbordbediening belangrijk is
Mensen met een motorische beperking en blinde bezoekers met een screenreader zijn afhankelijk van bediening zonder muis. Veel hulpmiddelen, zoals schakelaars, werken via dezelfde functies als het toetsenbord.
Ook ervaren gebruikers werken graag met het toetsenbord, omdat het sneller is. Een website die zonder muis werkt, is dus voor een grote groep klanten prettiger in gebruik.
De WCAG-eisen voor toetsenbord en focus
Deze succescriteria bepalen samen of je website met het toetsenbord goed te bedienen is. Ze horen allemaal bij niveau AA, het gangbare doel.
| Succescriterium | Niveau | Wat het vraagt |
|---|---|---|
| Toetsenbord (2.1.1) | A | Alle functies werken met het toetsenbord, zonder dat je toetsen binnen een bepaalde tijd hoeft in te drukken. |
| Geen toetsenbordval (2.1.2) | A | Je kunt elk onderdeel met het toetsenbord weer verlaten, zoals een ingesloten video of een pop-up. |
| Enkel teken sneltoetsen (2.1.4) | A | Sneltoetsen van één letter of cijfer kun je uitzetten of aanpassen, of ze werken alleen als het onderdeel focus heeft. |
| Blokken omzeilen (2.4.1) | A | Er is een manier om herhaalde blokken, zoals het menu, over te slaan, bijvoorbeeld met een skiplink. |
| Focus volgorde (2.4.3) | A | De focus gaat in een logische volgorde door de pagina, die past bij de betekenis en de bediening. |
| Focus zichtbaar (2.4.7) | AA | Je ziet altijd welk onderdeel de focus heeft. |
| Focus niet aan het zicht onttrokken (minimaal) (2.4.11) | AA | Het onderdeel met focus wordt niet volledig bedekt door andere content, zoals een vaste header of cookiebanner. Nieuw in WCAG 2.2. |
De belangrijkste toetsen
| Toets | Wat het doet |
|---|---|
| Tab | Naar het volgende onderdeel dat je kunt bedienen, zoals een link, knop of veld. |
| Shift + Tab | Terug naar het vorige onderdeel. |
| Enter | Een link volgen of een knop activeren. |
| Spatie | Een knop activeren, een selectievakje aan- of uitzetten of de pagina omlaag scrollen. |
| Pijltjestoetsen | Kiezen binnen een groep, zoals keuzerondjes, een keuzelijst of tabbladen. |
| Escape | Een pop-up, menu of dialoogvenster sluiten. |
Zo test je je website met het toetsenbord
Leg de muis weg
Open je website en klik één keer in de adresbalk. Druk daarna op Tab om door de pagina te gaan en op Shift + Tab om terug te gaan.
Tip: Op een Mac zet je in Safari eerst bij de geavanceerde instellingen de optie aan om met Tab elk onderdeel op een webpagina te markeren.
Volg de focus
Kijk bij elke stap of je ziet waar de focus staat en of de volgorde logisch is, meestal van boven naar beneden en van links naar rechts.
Bedien alles
Open menu's, kies opties en verstuur formulieren met Enter, spatie en de pijltjestoetsen. Sluit pop-ups met Escape.
Noteer de knelpunten
Kom je ergens niet meer uit, verdwijnt de focus achter een vaste header of springt hij naar een onverwachte plek? Noteer de pagina en het onderdeel.
Test je belangrijkste taken
Doorloop de taken die bezoekers het vaakst uitvoeren, zoals een contactformulier invullen of een product bestellen.
Veelvoorkomende problemen en oplossingen
Klikbare onderdelen die geen echte knop of link zijn
Een blok dat alleen met de muis klikbaar is gemaakt, krijgt geen toetsenbordfocus. Toetsenbordgebruikers kunnen het dan niet bedienen.
Tip: Gebruik echte knoppen en links. Die werken vanzelf met het toetsenbord en de screenreader.
Onzichtbare focus
Veel websites halen de standaard focusrand weg omdat die niet bij het ontwerp past, zonder er iets voor in de plaats te zetten.
Tip: Ontwerp een duidelijke focusrand in je eigen huisstijl, met minimaal 3:1 contrast met de achtergrond.
Pop-ups die de focus kwijtraken
Een dialoogvenster opent, maar de focus blijft achter het venster op de pagina staan.
Tip: Zet de focus in het venster als het opent en bij sluiten terug op de knop die het opende.
Focus achter een vaste header
Bij het tabben verdwijnt het onderdeel met focus onder een sticky header of banner.
Tip: Laat de pagina bij het tabben zo ver scrollen dat het onderdeel met focus onder de header in beeld blijft.
Een onlogische volgorde
De focus springt kriskras over de pagina, omdat de volgorde achter de schermen afwijkt van wat je op het scherm ziet.
Tip: Bouw de pagina op in dezelfde volgorde als waarin je hem leest: van boven naar beneden en van links naar rechts.
Geen skiplink
Toetsenbordgebruikers moeten op elke pagina eerst door het hele menu tabben voordat ze bij de inhoud zijn.
Tip: Zet als eerste link op de pagina een skiplink 'Naar de inhoud', die zichtbaar wordt zodra hij focus krijgt.
Toetsenbordbediening elke week bewaken
De automatische tests van AccessRadar controleren onder meer of klikbare onderdelen met het toetsenbord bereikbaar zijn, of je ergens vast komt te zitten, of de focus zichtbaar is, of de focusvolgorde logisch is en of je herhaalde blokken kunt overslaan. Na elke wekelijkse scan zie je per pagina wat er verbeterd is en wat nog aandacht vraagt.
Automatische tests én AI-contentanalyse
AccessRadar combineert automatische tests met AI-contentanalyse. Zo zie je niet alleen technische fouten, maar ook welke teksten je bezoekers echt helpen.
De AI-analyse leest de tekst van je pagina's en geeft suggesties, bijvoorbeeld voor:
- Alternatieve teksten: zegt de tekst iets zinvols, of is het 'afbeelding', een bestandsnaam of 'klik hier'?
- Linkteksten: wordt uit de linktekst en de tekst eromheen duidelijk waar een link naartoe leidt?
- Koppen en labels: beschrijven ze het onderwerp of het veld, of zijn het lege woorden zoals 'Info' of 'Veld 1'?
- Paginatitels en formulieren: is duidelijk waar een pagina over gaat en wat een veld verwacht?
Je krijgt concrete suggesties voor betere teksten, die je direct oppakt in je wekelijkse verbeterplan. Zo groeit je website elke week verder naar WCAG 2.2 AA-geschiktheid en bereik je meer klanten.
Lees hoe tests en AI-analyse samenwerken in het verbeterplan
Lees ook
Praktische uitleg over WCAG en digitale toegankelijkheid.
Website toegankelijkheid testen: zo pak je het stap voor stap aan
Zo test je de toegankelijkheid van je website: stap voor stap met een automatische scan, toetsenbordtest, screenreader en de meest voorkomende problemen.
Kleurcontrast volgens WCAG: eisen, uitzonderingen en contrastchecker
Welk kleurcontrast vraagt WCAG 2.2? Lees de eisen voor tekst, knoppen en iconen, en test je eigen kleuren direct met de gratis contrastchecker.
WCAG 2.2 AA-checklist: wat controleer je op je website?
Praktische WCAG 2.2 AA-checklist per categorie, met uitleg en tips om direct te verbeteren. Handig voor eigenaren, redacteuren en developers.
Controleer je website gratis op WCAG
Vraag de gratis WCAG-check van AccessRadar aan en ontvang de resultaten van een automatische scan per e-mail, als startpunt voor je verbeterpunten.
Wil je daarna elke week verder? Het WCAG-verbeterplan voegt wekelijkse scans en AI-contentanalyse toe.
Een WCAG-scan ondersteunt je beoordeling. Een automatische WCAG-scan kan volledige WCAG 2.2 AA-geschiktheid niet vaststellen. Combineer regelmatige WCAG-scans met handmatig onderzoek en feedback van mensen met een beperking.
Veelgestelde vragen over toetsenbordtoegankelijkheid
Wat is toetsenbordtoegankelijkheid?
Dat je alle functies van een website kunt gebruiken met alleen het toetsenbord, zonder muis. WCAG legt dit vast in onder meer succescriterium 2.1.1.
Hoe test ik mijn website op toetsenbordtoegankelijkheid?
Leg de muis weg en ga met Tab en Shift + Tab door de pagina. Controleer of je alles kunt bereiken en bedienen, of je de focus steeds ziet en of je nergens vast komt te zitten.
Mag ik de focusrand verwijderen?
Alleen als je er een duidelijke eigen focusstijl voor in de plaats zet. Niveau AA vraagt dat de focus altijd zichtbaar is.
Wat is een toetsenbordval?
Een onderdeel waar je met het toetsenbord wel in komt, maar niet meer uit. Bijvoorbeeld een ingesloten video of een pop-up die zich niet laat sluiten.
Wat is een skiplink?
Een link bovenaan de pagina waarmee je het menu overslaat en direct naar de inhoud gaat. Hij wordt meestal pas zichtbaar als hij de focus krijgt.