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>

Over deze richtlijnen

Deze richtlijnen worden onderhouden door het 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.