Toetsenbordbediening van een button
Veel gebruikers navigeren door een formulier met hun Tab-toets om van interactief element naar interactief element te springen, zoals buttons, links, invoervelden, radio buttons en checkboxes.
Krijgt een button de toetsenbordfocus, dan kan die met “enter” of “spatiebalk” worden geactiveerd. Zorg ervoor dat deze functionaliteit blijft werken als je een webcomponent bouwt, dit is standaard en verwacht gedrag van een button.
Zorg ervoor dat de volgorde waarin interactieve elementen focus krijgen logisch is en dat er geen onverwachte veranderingen plaatsvinden als een bezoeker de button activeert.
Voorbeelden
Doen
Gebruik een button, zodat de toetsenbordinteractie vanzelf goed gaat.
<button class="doFancyStuff button">Geef je op</button>
Niet doen
Een div gebruiken die alleen met de muis aanklikbaar is.
<div class="doFancyStuff button">Geef je op</div>
Meer lezen over gerelateerde WCAG-succescriteria op NL Design System
Op de WCAG succescriteria pagina's op deze website lees je meer over veelgemaakte fouten en hoe je kunt testen of jouw website aan de succescriteria voldoet.
- Succescriterium 2.1.1 Toetsenbord
- Succescriterium 3.2.1 Bij focus
- Succescriterium 3.2.3 Consistente navigatie
Over deze richtlijnen
Deze richtlijnen worden onderhouden door NL Design System en zijn op dit moment in beta.
We willen graag van de community horen of ze werkbaar en nuttig zijn. Heb je vragen, aanvullingen of opmerkingen? Open een issue op GitHub en deel je mening.