Toetsenbord

Wat het vereist

Alle functionaliteit van de inhoud moet via een toetsenbordinterface bedienbaar zijn, zonder dat specifieke timing per toetsaanslag vereist is. De gebruiker moet elk interactief element met Tab kunnen bereiken, het activeren met Enter of Spatiebalk, en complexe widgets bedienen met de pijltjestoetsen en andere standaardcombinaties.

Er zijn twee beperkte uitzonderingen: invoer die afhankelijk is van het pad van de beweging van de gebruiker (vrijhandtekenen, een document ondertekenen) en niet alleen de eindpunten, en invoer die een analoge handeling uit de echte wereld nabootst waarbij het pad van belang is.

Hoe hieraan te voldoen

• Gebruik native interactieve elementen (<button>, <a href>, <input>, <select>) — deze zijn standaard toetsenbordtoegankelijk.
• Voeg voor aangepaste widgets gebouwd van <div> of <span> role, tabindex="0" en toetshandlers toe voor Enter, Spatiebalk, Escape en pijltjestoetsen, afhankelijk van het patroon.
• Volg de ARIA Authoring Practices Guide voor menu’s, tabbladen, keuzelijsten, dialoogvensters en boomstructuren — elk heeft een gedefinieerd toetsenbordinteractiemodel.
• Bied een toetsenbordequivalent voor elke muisgebaar: slepen-en-neerzetten heeft een fallback met sorteerknoppen nodig, hover-only menu’s moeten klikbaar zijn om te openen, veegcarrousels hebben vorige/volgende-knoppen nodig.
• Test door de muis los te koppelen en de gehele stroom te doorlopen.

Veelvoorkomende fouten

• <div onclick> zonder role="button", tabindex="0" of toetshandler — volledig onzichtbaar voor toetsenbordgebruikers.
• Aangepaste dropdowns waarbij de trigger bereikbaar is maar de opties niet met pijltjestoetsen navigeerbaar zijn.
• Kanban-borden met slepen-en-neerzetten, bestandsuploadders of canvastools zonder toetsenbordoptie.
• Sluitknoppen van modaldialoogvensters die aanwezig zijn maar geen Escape-toetshandler hebben.
• Hover-only tooltips en menu’s die nooit verschijnen bij toetsenbordfocus.
• Carrousels en fotogalerijen die alleen via veeg- of klikbediening op indicatoren te bedienen zijn en geen tabindex hebben.

axe en Lighthouse signaleren ontbrekende tabindex en ontbrekende toegankelijke namen, maar kunnen niet vaststellen of een aangepaste dropdown daadwerkelijk reageert op pijltjestoetsen — dat deel vereist handmatig testen.

Waarom het van belang is

Dit is het belangrijkste succescriterium voor bedienbaarheid. Schermlezergebruikers navigeren via het toetsenbord. Schakelaargebruikers emuleren een toetsenbord. Stembestuurders geven opdrachten die worden omgezet in toetsenbordgebeurtenissen. Gevorderde gebruikers met RSI zijn er ook van afhankelijk. Een site die niet voldoet aan 2.1.1 sluit effectief iedereen uit die geen muis kan gebruiken — en die groep is veel groter dan voor de hand liggend.