Het tabindex-attribuut
Met het tabindex-attribuut kan de lees- en tabvolgorde worden beïnvloed. Dit heeft impact op gebruikers die afhankelijk zijn van een toetsenbord en gebruikers van screenreaders, omdat deze de volgorde in de broncode gebruiken. Het kent drie waarden:
tabindex="1"(of elk getal groter dan 1) definieert een expliciete tab- of navigatievolgorde.tabindex="0"staat elementen toe, behalve links en formulierelementen, om toetsenbordfocus te krijgen. Het verandert de tabvolgorde niet, maar plaatst het element in de logische navigatiestroom, alsof het een link/knop op de pagina is.tabindex="-1"staat toe dat elementen, behalve links en formulier-elementen, een “programmatische” focus krijgen, wat betekent dat de focus op het element kan worden gezet door middel van scripting.
Problemen
Door de kracht en invloed van het tabindex-attribuut kunnen er diverse problemen ontstaan als deze niet goed wordt toegepast:
- De visuele volgorde wijkt af van de volgorde in de broncode.
- Focus en bedienbaarheid van focusbare items blijft niet behouden.
Deze zaken zijn een inbreuk op succescriterium 2.4.3 Focus volgorde in de Richtlijnen voor Toegankelijkheid van Webcontent (WCAG).
Oplossingen
Het tabindex attribuut met een waarde van 1 of hoger definieert expliciet een navigatievolgorde voor elementen die focus kunnen krijgen (meestal links en formulierelementen) binnen een pagina. Het kan ook worden gebruikt om te bepalen of elementen al dan niet focus moeten krijgen. Dit moet worden vermeden. Deze elementen zullen eerder toetsenbordfocus krijgen dan elementen zonder een tabindex (of tabindex="0"), wat resulteert in een volgorde die verschilt van de visuele volgorde. In plaats van tabindex te gebruiken, pas gewoon de volgorde in de broncode van de pagina aan om een logische navigatie- en leesvolgorde te bereiken.
Een waarde van 0 geeft aan dat het element in de standaard navigatievolgorde moet worden geplaatst. Hierdoor kunnen elementen die niet van nature focus ontvangen (zoals <div>, <span>, <p>, en <a> zonder href-attribuut), toetsenbordfocus krijgen. Links en formulierelementen zijn het beste voor bijna alle interactieve elementen, maar tabindex=0 staat toe dat andere elementen focusbaar zijn en dus mogelijk interactie kunnen triggeren. Vaak zien we deze fout als developers denken op deze manier een custom component of widget toegankelijk voor toetsenbord te kunnen maken. Maar met tabindex maak je elementen niet bedienbaar. Het krijgt alleen focus. Zorg dat ARIA correct is toegepast en device onafhankelijke event handlers in JavaScript zijn gebruikt.
Een tabindex="-1" verwijdert interactieve elementen uit de standaard navigatievolgorde. In bijna alle gevallen is dit niet wenselijk! Indien toegevoegd aan iets dat nog niet interactief is, staat tabindex="-1" toe dat het element programmatische focus krijgt. Dit betekent dat focus erop gezet kan worden met focus() scripting. Dit kan nuttig zijn voor elementen waarnaar niet rechtstreeks genavigeerd moet worden met de tab-toets, maar die toch toetsenbordfocus moeten krijgen. Voorbeelden hiervan zijn een modal of overlay dat moet worden gefocust wanneer het wordt geopend, of een foutmelding bij het indienen van een formulier die onmiddellijk focus moet krijgen wanneer een ongeldig formulier wordt ingediend.
Een waarde van -1 kan ook nuttig zijn in complexe widgets en menu’s die gebruik maken van pijltjestoetsen, of andere sneltoetsen. Het kan ervoor zorgen dat slechts één element binnen een widget, zoals het actieve tabblad binnen een groep tabbladen voor een tabpaneel, navigeerbaar is met de tab-toets, terwijl de focus nog steeds kan worden ingesteld op andere onderdelen binnen de widget.
💡 Opmerking: Onthoud dat tabindex="-1" het element verwijdert uit de standaard navigatiestroom. Wijs het dus niet toe aan een element dat met het toetsenbord moet kunnen worden genavigeerd, zoals een link of knop waarop ziende gebruikers met de muis kunnen klikken.
Testen
Controleer je code of dit attribuut voorkomt.
Conclusie
Gebruik het tabindex-attribuut liever niet. Gebruik het enkel in het geval van custom componenten of widgets. Maar zelfs in dat geval is het verstandig om na te denken of native HTML-elementen niet de voorkeur hebben boven custom componenten.
👉️ Opmerkingen? Vragen? Iets onduidelijk of onvolledig? Of vond je het helemaal geweldig? Stuur me een mailtje met je feedback!
Credits
Deze pagina is grotendeels gebaseerd op een vertaling van WebAim’s pagina over tabindex.