Tabvolgorde

Voor de meeste internetgebruikers is het vanzelfsprekend om met de muis in de hand over het web te surfen. Voor blinden, slechtzienden en sommige mensen met een motorische handicap is het erg moeilijk of zelfs onmogelijk om de muis te hanteren. Zij zijn helemaal aangewezen op het toetsenbord. Als webdesigner let je er dus best op dat links en knoppen bereikbaar zijn met de tabtoets en activeerbaar met de entertoets. Ook een logische en voorspelbare tabvolgorde verbetert de gebruikservaring voor wie ‘tabt’ in plaats van ‘muist’. Hierbij kan het HTML-attribuut tabindex van pas komen.

Meestal is de tabvolgorde echter van nature logisch en voorspelbaar en is het toevoegen van tabindexes niet nodig. Als je het attribuut niet goed gebruikt, kan je bovendien nieuwe problemen introduceren. In dit artikel bespreken we in welke gevallen het tabindex-attribuut wel nuttig ingezet kan worden en wijzen we op enkele valkuilen.

Waar weet de browser zelf raad mee?

HTML-elementen die de browser standaard opneemt in de tabvolgorde, zijn a, area, button, input type="text", select, textarea en object. Deze elementen krijgen achtereenvolgens de focus als je meermaals op de tabtoets drukt. De focus wordt verplaatst in de volgorde waarin de elementen voorkomen in het Document Object Model van de webpagina. Over het algemeen is die volgorde identiek aan de volgorde waarin de elementen voorkomen in de HTML-broncode (‘view source’). Het herpositioneren van elementen met CSS heeft geen invloed op deze volgorde.

Andere elementen (zoals h1 of span) kan je niet bereiken met de tabtoets. In de meeste gevallen is dat ook niet nodig, tenzij er een actie (of event in JavaScript-jargon) aan gekoppeld is. Verderop in het artikel lees je hoe je ook deze elementen opneemt in de tabvolgorde.

Noot over focusmarkering

De meeste browsers markeren een gefocust element met een stippellijn of een blauwe focusring (Mac-browsers). Met behulp van CSS (:focus) kan je die markering versterken door bijvoorbeeld ook de achtergrondkleur te wijzigen.

Het komt helaas vaak voor dat de focusmarkering niet te zien is doordat een CSS-regel als a:focus { outline: none} is gebruikt. Dat is problematisch voor wie het toetsenbord gebruikt: je kan dan wel tabben, maar je ziet niet welk element gefocust wordt. Het maakt het bovendien onmogelijk om te testen of de tabvolgorde logisch is.

Vuistregel: als je de standaardfocusmarkering aanpast, zorg er dan voor dat je ze versterkt en ze zeker niet weghaalt. CSS biedt heel wat creatieve mogelijkheden om de focusmarkering naar je hand te zetten.

Wanneer is het toevoegen van tabindexes nuttig?

In de inleiding schreven we al dat de tabvolgorde over het algemeen van nature logisch is. Beschouw het tabindex-attribuut daarom als een redmiddel voor die enkele gevallen waarin de tabvolgorde bokkensprongen maakt. Vaak is dat het gevolg van een slordig gestructureerd HTML-document en/of het gebruik van tabellen voor lay-outdoeleinden..

Als je bij het tabben eerst de hoofdnavigatie doorloopt, vervolgens de focus ziet verschuiven naar de hyperlinks in de footer, dan naar de links in de lopende tekst en ten slotte naar de links in de broodkruimel, dan spreken we van een onlogische tabvolgorde. Meestal duidt dat op het gebruik van absolute CSS-positionering. In zo’n geval is het eerder aangewezen om de logische blokken in de HTML-code van plaats te wisselen en zijn slechts minimale ingrepen nodig in de CSS-code. Als dat niet kan — bijvoorbeeld omdat het gebruikte CMS het niet toestaat — dat biedt het toevoegen van tabindexes een uitkomst.

Alles of niets!

Browsers zitten zo in elkaar dat eerst alle elementen met een tabindex overlopen worden en daarna pas alle elementen zonder tabindex. Stel dat ieder formulierelement behalve de verzendknop een tabindex krijgt, dan kan je het formulier weliswaar probleemloos invullen, maar als je uit het laatste veld tabt, wordt de focus niet naar de verzendknop verplaatst, maar naar de eerste link zonder tabindex. Pas wanneer alle links zonder tabindex overlopen zijn, wordt de focus verplaatst naar de verzendknop. Dat is erg vervelend.

Onderstaand voorbeeld illustreert dit probleem duidelijk. Hier werd de tabvolgorde van de formuliervelden gemanipuleerd (‘Naam’, ‘Voornaam’, ‘Vegetarisch’), maar is de verzendknop niet voorzien van een tabindex. Probeer het zelf uit om te ervaren waar het fout loopt.

Het is dus raadzaam om geen tabindexes te gebruiken als de tabvolgorde op zich behoorlijk logisch is. Het gevaar is namelijk dat je een of meerdere formuliervelden een tabindex ‘vergeet’ te geven. Vaak ook wordt de aanwezigheid van tabindexes bij een toekomstige update over het hoofd gezien of laat het gebruikte CMS het simpelweg niet toe om alle links een tabindex te geven.

Andere mogelijkheden

Naast het sturen van de tabvolgorde, biedt tabindex ook nog twee andere mogelijkheden:

HTML-elementen aan de tabvolgorde toevoegen die normaal gesproken niet gefocust kunnen worden (zoals h1 of span).
HTML-elementen uit de tabvolgorde halen die normaal gesproken wel gefocust kunnen worden (zoals a of input).

1. HTML-elementen aan de tabvolgorde toevoegen die normaal gezien niet gefocust kunnen worden

In sommige gevallen is het nuttig om een actie te koppelen aan HTML-elementen die de browser zelf niet opneemt in de tabvolgorde.

Voorbeelden:

Het in- en uitklappen van een navigatieniveau (ul) in een sitemap.
Een ‘Veelgestelde vraag’ waarbij je op de titel (een h2 bijvoorbeeld) moet klikken om de vraag te tonen.

Speel op veilig

In de meeste gevallen — zeker wanneer geen enkel ander element op de pagina een tabindex heeft — geef je het tabindex-attribuut een 0-waarde. Zo kan het element gefocust worden zonder dat je de tabvolgorde beïnvloedt. Dat is het veiligst. Je kan de elementen ook toevoegen aan de tabvolgorde door ze een tabindex van 1 tot 32767 te geven, maar dan geldt opnieuw dat je alle elementen een tabindex moet geven om bokkensprongen te voorkomen.

Activeren met het toetsenbord

Een tabindex koppelen aan een h1 of span is één zaak, maar de link moet ook geactiveerd kunnen worden. Dat wordt helaas wel eens over het hoofd gezien. Voor elementen die standaard te bereiken zijn met het toetsenbord (a, input type="“submit”" etc.), zorgt de browser ervoor dat je ook op Enter kan drukken om de link te activeren. Voor andere elementen die je een tabindex geeft, moet je als webdesigner de hulp inroepen van JavaScript.

Hoe je dat precies doet, hangt af van het framework dat je gebruikt. Het komt erop neer dat je een keyUp event handler koppelt aan het element en hieraan een actie koppelt (of een klik simuleert) wanneer keyCode 13 — de Enter-toets — gedetecteerd wordt. In dit vereenvoudigde jQuery-voorbeeld koppelen we eerst een onClick event handler (simpelweg click in jQuery) aan de h1. De jQuery method click() activeert dat event:


$(‘h1’).click(function({ 
alert(‘Hoera!’); 
}); 

$('h1').keyup(function(event) { 
if (event.keyCode == 13) 
$(this).click(); 
});

Wanneer kan u deze techniek gebruiken?

Deze techniek komt van pas wanneer u geen invloed heeft op de HTML-code die door een script of CMS gegenereerd wordt, maar een webpagina of webapplicatie toch toegankelijk wil maken voor toetsenbordgebruikers. Hij is bijvoorbeeld toepasbaar op een ‘accordeonnavigatie’, op tabbladen, fotocaroussels en blokjes die in- en uitgeklapt kunnen worden.

U voorkomt er bovendien mee dat u een constructie als <a href="#">Klap open</a> moet toevoegen om ervoor te zorgen dat een onderdeel in- of uitgeklapt kan worden. Het -element behoud je liefst voor ‘echte’ links; links die een nieuwe webpagina openen of verwijzen naar ankers op dezelfde pagina (zoals <a href=“"#content”">). Op die manier houdt u ook de linklijst overzichtelijk omdat die enkel a-elementen bevat. Screenreaders als Jaws (Windows) of VoiceOver (Mac OS) stellen zo’n linklijst automatisch samen. Het is een navigatiehulpmiddel voor blinden en slechtzienden waarmee u alle links op een pagina kan sorteren en doorzoeken en biedt een handig alternatief voor het traditionele ‘tabben’.

Als u deze techniek gebruikt voor elementen die initieel dichtgeklapt zijn, zorg er dan tevens voor dat u de benodigde CSS (zoals div.blok { display: none }) eveneens inlaadt met behulp van JavaScript, bijvoorbeeld met een onLoad event. Zo bekomt u dat wie JavaScript uit heeft staan, toch toegang heeft tot de informatie; de blokken zullen niet bereikbaar zijn met het toetsenbord, maar wel alvast uitgeklapt zijn.

2. HTML-elementen uit de tabvolgorde halen die normaal gezien wel gefocust kunnen worden

In enkele gevallen kunt u het gebruiksgemak net verhogen door een aantal elementen uit de tabvolgorde te halen. Denk bijvoorbeeld aan een lijst met nieuwsberichten waarbij u zowel op de titel, een foto als op een ‘Lees meer’-link kan klikken. Als men tabt, zijn de laatste twee ‘hotspots’ eigenlijk overbodig; ze zorgen er enkel voor dat men vaker op de tab-toets moet drukken om een link te activeren die verderop te vinden is.

Met het attribuut tabindex=“-1” kan je deze ‘overbodige’ elementen uit de tabvolgorde halen. Wees voorzichtig en gebruik deze techniek uitsluitend als je er zeker van bent dat links meer dan één keer voorkomen op dezelfde pagina en het voor je bezoekers duidelijk is dat deze links dezelfde bestemming hebben.

Voorbeeld (goed):


<article>
<h2><a href="/kortingen">Extra kortingen in mei</a></h2>
<a tabindex="“-1”" href="/kortingen">
<img src="kortingen.png" alt="Extra kortingen in mei" /></a> 
<a tabindex="“-1”" href="/kortingen">Lees meer</a>

Opmerkingen bij deze techniek:

Elementen met tabindex=“-1” kunnen wel met behulp van JavaScript gefocust worden.
Ze verschijnen ook in de linklijst.

Onthouden

De meeste webpagina’s hebben geen tabindex nodig.
Elementen met een tabindex-attribuut krijgen altijd eerst focus. Pas daarna krijgen alle andere elementen op de pagina focus.
Met tabindex=“0” kan je ieder HTML-element toevoegen aan de tabvolgorde zonder de bestaande tabvolgorde te beïnvloeden.
Met tabindex=“-1” haal je elementen uit de tabvolgorde.