Je tabvolgorde is door elkaar gehusseld: haal positieve tabindex weg
Met de Tab-toets ga je van link naar link en van veld naar veld, in de volgorde van je HTML. Met tabindex="1" of hoger kun je die volgorde aanpassen, maar dat werkt bijna altijd averechts.
In het kud-rapport Je tabvolgorde is door elkaar gehusseld
Waarom het uitmaakt
Elementen met een positieve tabindex krijgen voorrang op alles, waardoor toetsenbordgebruikers door je pagina springen in een volgorde die nergens op slaat.
Bij elke aanpassing aan je pagina moet je de nummering bijwerken, en dat gaat vroeg of laat mis.
Zo los je het op
- Zoek in je HTML naar
tabindexmet een waarde van 1 of hoger en haal die weg. - Klopt de volgorde dan niet, pas dan de volgorde van je HTML aan, niet de tabindex.
- Gebruik
tabindex="0"alleen om een element dat normaal geen focus krijgt bereikbaar te maken, entabindex="-1"om iets via een script focus te kunnen geven. - Gebruik waar het kan echte knoppen en links; die zijn vanzelf bereikbaar met het toetsenbord.
<!-- niet zo -->
<input tabindex="3">
<!-- gewoon in de juiste volgorde in je HTML -->
<input>Op jouw platform
- Formulierplugins
- Sommige formulierplugins zetten automatisch tabindex-waarden. Gravity Forms heeft daar bijvoorbeeld een instelling voor; zet die uit.
Veelgestelde vragen
Is tabindex="0" ook slecht?
Nee. 0 voegt een element toe aan de normale volgorde. Alleen waarden van 1 en hoger verstoren de volgorde.
Hoe test ik mijn tabvolgorde?
Klik in de adresbalk en druk steeds op Tab. Volgt de focus een logische route van boven naar beneden?