Zorg dat het formulier werkt met een toetsenbord
Een formulier moet goed werken en goed te begrijpen zijn voor een toetsenbordgebruiker.
Sommige gebruikers navigeren door een formulier met hun Tab-toets. Zorg dat alle onderdelen van het formulier bereikbaar zijn en gebruikt kunnen worden met alleen een toetsenbord (inclusief bijvoorbeeld kalenders). Dit ondersteunt toetsenbordgebruikers, maar ook gebruikers met andere randapparatuur die zich als toetsenbord presenteert, zoals een switch control.
Hierbij is van toepassing:
- Maak de toetsenbordfocus goed zichtbaar op de pagina Visueel Ontwerp van formulieren.
- Gebruik geen positieve tabindex.
Documentatie over hoe formuliervelden moeten werken met het toetsenbord:
- Keyboard Accessibility van WebAIM.
- A Guide To Keyboard Accessibility: HTML And CSS by Cristian Díaz in Smashing Magazine.
Gebruik geen positieve tabindex
Het eerste formulierveld automatisch de focus te geven is een veelgebruikte constructie. Dit kan door het eerste veld een tabindex te geven met een waarde groter dan nul, bijvoorbeeld tabindex="1" of met gebruik van autofocus. De gebruiker is meteen klaar om het formulier in te gaan vullen.
Maar dit levert voor toetsenbord- en screenreadergebruikers problemen op. Stel je voor dat je het formulier helemaal niet wilt invullen, maar naar het menu wilt, of de tekst boven het formulier wilt lezen. Dan zul je terug naar boven moeten navigeren.
Een screenreadergebruiker kan zo tekst missen die boven het formulier staat. Misschien staan daar wel instructies of aanvullende informatie over hoe het formulier goed in te vullen.
Gebruik dus ook nooit meerdere positieve tabindexen om de gebruiker te dwingen een bepaalde tabvolgorde aan te houden.
Laat de bezoeker zelf beslissen wat ze wil lezen en in welke volgorde. Kaap de toetsenbordfocus niet maar hou de natuurlijke tabvolgorde intact.
Adam Silver geeft hier uitgebreid uitleg over in The problem with automatically focusing the first input and what to do instead.
Let wel: tabindex="0" en tabindex="-1" zijn wel toegestaan om bepaalde elementen focus te kunnen geven die van nature geen focus krijgen. Dit verstoort de natuurlijke tabvolgorde niet. Wanneer welke waarde te gebruiken wordt uitgelegd in 0 and -1 Values van WebAIM.
Een goede uitleg over de impact van tabindex op toegankelijkheidstaat staat in: How To Avoid Breaking Web Pages For Keyboard Users van Andrew Nevins.
Geen positieve tabindex of autofocus gebruiken is nodig om te voldoen aan de volgende WCAG-succescriteria:
- 2.4.3 Focusvolgorde (niveau A).
- 3.2.3 Consistente navigatie (niveau AA).
Doen
Formulier zonder tabindex.
<form><div><label for="naam1">Uw naam</label></div><div><input id="naam1" autocomplete="name"/></div><div><label for="email1">Uw e-mailadres</label></div><div><input id="email1" autocomplete="email"/></div><div><button>Stuur mij de nieuwsbrief!</button></div></form>
Niet doen
Formulier met gebruik van een positieve tabindex.
<form><div><label for="naam2">Uw naam</label></div><div><input id="naam2" autocomplete="name" tabindex="1"/></div><div><label for="email2">Uw e-mailadres</label></div><div><input id="email2" autocomplete="email"/></div><div><button>Stuur mij de nieuwsbrief!</button></div></form>
Aanvullingen of opmerkingen?
Deze richtlijnen worden onderhouden door het NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub met je suggesties.