Tab-stops: zo maak je toetsenbordnavigatie toegankelijk

De basisregel: een logische volgorde (WCAG 2.4.3)

Het WCAG-criterium dat het meeste van toepassing is op tab-stops is succescriterium 2.4.3: Focus volgorde. Het criterium is simpel: als een bezoeker de Tab-toets gebruikt, moet de volgorde logisch zijn.

Meestal betekent dit dat je de volgorde op het scherm volgt. Je leest van links naar rechts en van boven naar beneden. De Tab-toets moet deze route ook volgen. Een bezoeker mag niet ineens van de bovenkant van de pagina naar de onderkant springen zonder duidelijke reden.

Code-voorbeeld: Gebruik standaard HTML

De makkelijkste manier om de volgorde goed te krijgen, is door de juiste HTML-elementen te gebruiken. Elementen zoals <button>, <a> en <input> zijn van nature ‘focusbaar’. De browser snapt dan vanzelf dat je ernaartoe moet kunnen tabben.

HTML

<button class="btn-primair">Verstuur</button>

<a href="/contact">Neem contact op</a>

<div class="nep-knop" onclick="verstuur()">Verstuur</div>

Maak de focus altijd zichtbaar

Als je met het toetsenbord over de pagina gaat, moet je wel kunnen zien waar je bent. Dit noemen we de ‘focus-indicator’. Meestal is dit een randje om de link of knop heen.

Zet deze rand nooit zomaar uit in je CSS zonder een goed alternatief te bieden. Een bezoeker is anders ‘blind’ aan het navigeren.

Code-voorbeeld: Een duidelijke focus in CSS

Hier is een voorbeeld van hoe je een goede, opvallende focus-rand maakt in je code:

CSS

/* DON'T: Hiermee verwijder je de standaard focus-rand. Doe dit alleen als je zelf een betere maakt! */
button {
  outline: none; 
}

/* DO: Een duidelijk alternatief met goed contrast (minimaal 3:1) en een dikte van 2 pixels */
button:focus, 
a:focus, 
input:focus {
  outline: 2px solid #000000; /* Een dikke zwarte rand */
  outline-offset: 2px; /* Zorgt voor wat ruimte tussen het element en de rand */
}

Nieuwe regels voor focus in WCAG 2.2

In de nieuwste versie van de toegankelijkheidsrichtlijnen (WCAG 2.2) zijn de regels voor de focus wat strenger geworden. Dit zijn de belangrijkste twee:

1. Focus niet bedekt (2.4.11): Als je naar een link tabt, mag deze link niet verborgen zijn achter iets anders. Denk aan een menu dat vast bovenaan het scherm staat (een sticky header), of een grote cookiemelding op de voorgrond.
2. Focus weergave (2.4.13, niveau AAA): Het focus-randje moet goed opvallen. Het moet genoeg kleurcontrast hebben ten opzichte van de achtergrond en minimaal 2 pixels dik zijn. (Zie het CSS-voorbeeld hierboven).

Do’s en don’ts voor Tab-stops

Houd je aan deze handige richtlijnen:

• DO: Maak alle interactieve elementen focusbaar (links, knoppen, formuliervelden).
• DO: Zorg dat de volgorde in je code klopt met wat je op het scherm ziet.
• DON’T: Zorg dat statische teksten of plaatjes (waar je niet op kunt klikken) geen focus krijgen.
• DON’T: Sluit bezoekers niet op. Als er een pop-up opent, moet je deze altijd met het toetsenbord weer kunnen sluiten.

Code-voorbeeld: Het gebruik van Tabindex

Soms bouw je een speciaal element dat standaard niet focusbaar is. Dan kun je het HTML-attribuut tabindex gebruiken. Maar pas op, hier worden vaak fouten mee gemaakt.

HTML

<div role="button" tabindex="0" onclick="actie()">Mijn speciale knop</div>

<div id="succes-melding" tabindex="-1">Je formulier is verstuurd!</div>

<a href="/home" tabindex="1">Home</a>
<a href="/over-ons" tabindex="2">Over ons</a>

Veelgemaakte fouten

In onze onderzoeken zien we dat websites vaak op deze twee dingen zakken:

1. Een springende focus door tabindex: Bouwers gebruiken getallen zoals tabindex="1" of tabindex="2". Zodra de pagina iets verandert, klopt er niets meer van de route. De focus springt dan van boven naar onder en weer terug.
2. De focus verstopt achter het menu: Als je naar beneden scrolt met de Tab-toets, verdwijnt de focus soms achter een vastgezette menubalk of een cookie-pop-up. Omdat de bezoeker dan niet ziet waar hij is, keuren we dit af.