Gebruik van het tabindex-attribuut

Dit artikel is met toestemming van de auteur vertaald uit het Engels: Using the tabindex attribute, geschreven door Léonie Watson van The Paciello Group.

Met het HTML tabindex-attribuut kan je de toetsenbordfocus sturen. Bij juist gebruik, kan je in widgets op websites de tabfocus verbeteren. Bij foutief gebruik, kan het tabindex-attribuut het gebruiksgemak voor toetsenbordgebruikers totaal verstoren.

Het tabindex-attribuut bepaalt of een element focus krijgt en hoe dat gebeurt. Als waarde krijgt het een integer (geheel getal), en het gedrag dat eruit volgt voor toetsenbordgebruikers verschilt als het getal positief, negatief of 0 is.

Om te begrijpen waarom het tabindex-attribuut zo een belangrijke invloed heeft op het gebruiksgemak, is het noodzakelijk om te weten hoe toetsenbordinteractie werkt. Een toetsenbordgebruiker navigeert meestal door de inhoud met de tabtoets. De focus gaat van het ene focusbare element naar het volgende, in sequentiële volgorde.

Bepaalde interactieve HTML-elementen zoals links en formuliervelden zijn standaard focusbaar. Als ze in een webpagina voorkomen, wordt hun sequentiële volgorde bepaald door de volgorde waarin ze voorkomen in de HTML-broncode.

<label for="username">Gebruikersnaam:</label>
<input type="text" id="username"> <!-- 1ste in tabvolgorde -->

<label for="password">Paswoord:</label>
<input type="password" id="password"> <!-- 2de in tabvolgorde -->

<input type="submit" value="Log in"> <!-- 3de in tabvolgorde -->

Een toetsenbordgebruiker zal eerst tabben naar het gebruikersnaam veld, dan het paswoord veld, en tenslotte naar de log in knop. Deze drie elementen krijgen standaard de focus, en ze worden doorlopen in de volgorde zoals ze verschijnen in de broncode. Met andere woorden, het is niet nodig om expliciet tabindex te gebruiken omdat de browser het focussen probleemloos afhandelt.

tabindex=0

Als tabindex de waarde 0 krijgt, wordt het element toegevoegd aan de tabvolgorde gebaseerd op zijn locatie in de broncode. Als het element standaard focusbaar is, is het helemaal niet nodig om tabindex te gebruiken. Als je echter een element zoals een span of div een andere functie geeft, dan is tabindex=0 bedoeld om het in de tabvolgorde op te nemen.

Merk op dat het gemakkelijker is om, overal waar het kan, een focusbaar HTML-element te gebruiken. Als je er bijvoorbeeld voor kiest om button of input type="checkbox" te gebruiken, dan zorgt de browser automatisch voor focus en interactie via het toetsenbord. Als je andere elementen de functie van knop of aankruisvakje geeft (custom widgets), dan moet je zelf manueel alles voorzien wat nodig is om focus en interactie via het toetsenbord correct te laten verlopen.

tabindex=-1

Als tabindex een negatieve waarde krijgt, zoals -1, wordt het element focusbaar via scripts maar het wordt niet opgenomen in de tabvolgorde. Met andere woorden, het element is onbereikbaar voor iemand die de tabtoets gebruikt maar met een script kan je de focus er wel naartoe brengen.

Een voorbeeld is focus verplaatsen naar het overzicht van fouten dat verschijnt na het invullen van een formulier. Het overzicht staat meestal aan het begin van het formulier, dus je wil er de aandacht op vestigen van gebruikers van een screenreader en vergrotingssoftware, en je wil alle toetsenbordgebruikers aan het begin van het formulier positioneren zodat ze de fouten kunnen beginnen te verbeteren. Je wil echter niet het overzicht van fouten zelf in de tabvolgorde van de pagina opnemen.

<div id="errorSummary" tabindex="-1">
<h2>Uw informatie bevat drie fouten</h2>
<ul>
...
</ul>
</div>

tabindex=1+

Het wordt problematisch als tabindex een positieve waarde krijgt. Het dwingt de toetsenbordgebruiker in een tabvolgorde die niet overeenkomt met wat hij verwacht.

<label for="username">Gebruikersnaam:</label>
<input type="text" id="username" tabindex="3"> <!-- 3de in tabvolgorde -->

<label for="password">Paswoord:</label>
<input type="password" id="password" tabindex="1"> <!-- 1ste in tabvolgorde -->

<input type="submit" value="Log in" tabindex="2"> <!-- 2de in tabvolgorde -->

Dit voorbeeldformulier ziet eruit zoals men verwacht: invoervelden voor gebruikersnaam en paswoord, gevolgd door de log in knop. De tabvolgorde is echter helemaal niet logisch. De focus zal eerst naar het paswoord gaan, dan naar de log in knop, en tenslotte naar de gebruikersnaam.

Het wordt erger als je je realiseert dat het paswoord veld het eerste focusbare element is geworden van de pagina die het formulier bevat. Het maakt niet uit hoeveel focusbare elementen in de volgorde van de broncode of de visueel volgorde voorafgaan aan het paswoord veld, de tabindex="1" betekent dat het als eerste element op de pagina de focus krijgt.

Naast een onlogische volgorde, is een ander gevaar van positieve waarden voor tabindex dat je een of meerdere velden vergeet een tabindex te geven. Het element wordt dan overgeslagen en komt pas veel later in de tabvolgorde voor. Ervaar zelf dat het fout loopt als je vergeet om de knop een tabindex te geven.

Samenvatting

Het tabindex-attribuut heeft verschillende functies, en het kan het gebruiksgemak voor toetsenbordgebruikers verbeteren of totaal verstoren. Onthoud het volgende als je overweegt het tabindex-attribuut te gebruiken:

• Gebruik tabindex=0 om een element dat normaal niet focusbaar is op te nemen in de tabvolgorde doorheen de inhoud, maar weet dat het gebruik van zo een custom control veel moeilijker is dan een element te gebruiken dat standaard focusbaar is
• Gebruik tabindex=-1 om een element via scripts focusbaar te maken, maar het niet op te nemen in de tabvolgorde doorheen de inhoud
• Vermijd tabindex met positieve getallen.

Meer lezen

• HTML-definitie van Interactieve inhoud, is inhoud die specifiek is bedoeld voor gebruikersinteractie.
• HTML tabindex definitie.
• ARIA – providing keyboard focus.