Toetsenbordtoegankelijk
Alle functionaliteit moet bereikbaar en bedienbaar zijn via het toetsenbord. 78% van de homepagina's heeft toetsenbordtoegankelijkheidsproblemen. Als het niet werkt met een toetsenbord, werkt het niet voor een groot deel van je publiek.
Everything must work using the keyboard alone — no step should need a mouse. Essential for people who can't use one.
WCAG 2.1.1 (Niveau A) vereist dat alle functionaliteit bedienbaar is via een toetsenbordinterface. WCAG 2.1.2 voegt toe dat er geen toetsenbordvallen mogen zijn — gebruikers moeten de focus kunnen verplaatsen van elk component met standaardtoetsen.
Veelvoorkomende fouten: aangepaste dropdowns die niet reageren op pijltoetsen, sleep-only interfaces, hover-only tooltips, click handlers op niet-focusbare elementen, en modale dialogen die de focus niet vasthouden of terugzetten.
Waarom dit belangrijk is
Toetsenbordtoegang is fundamenteel — het treft gebruikers met motorische beperkingen, schakelaargebruikers, schermlezersgebruikers, powerusers en iedereen met een kapotte muis. Als het niet werkt met een toetsenbord, werkt het niet voor een aanzienlijk deel van je publiek.
Hoe te detecteren
Tab door de hele pagina zonder de muis aan te raken. Kun je: elk interactief element bereiken? Elke knop en link activeren? In en uit elk widget navigeren? Altijd zien waar de focus is? Zijn er toetsenbordvallen?
Hoe op te lossen
<!-- Use native interactive elements --> <button onclick="save()">Save</button> <!-- ✓ keyboard-free --> <div onclick="save()">Save</div> <!-- ✗ not focusable --> <!-- If you must use a div, add ALL required attributes --> <div role="button" tabindex="0" onclick="save()" onkeydown="if(event.key==='Enter'||event.key===' ')save()"> Save </div>