2-4-3
Positieve tabindex die alles in de war gooit
tabindex="1". Twee woorden. En je hele focusvolgorde is kapot. Een positieve tabindex haalt een element uit de natuurlijke focusvolgorde. Het krijgt altijd als eerste focus — vóór alle andere elementen op de pagina. Ongeacht waar het in de HTML staat.
In-page link die de focus niet meeneemt
Een inhoudsopgave bovenaan een lang artikel. “Hoofdstuk 3.” Je klikt erop. De pagina scrollt naar Hoofdstuk 3.
Skiplink die de focus niet verplaatst
“Ga naar inhoud.” Je drukt op Enter. De pagina scrollt naar de content. Mooi.
Focus gaat niet naar de foutmelding na het versturen
Je vult een formulier in. Twee velden vergeten. Je drukt op Versturen.
Links in een carrousel die niet bereikbaar zijn
Een carrousel met aanbiedingen. Elke slide heeft een “Bekijk aanbieding”-link. Je tabt door de pagina. Je bereikt de carrousel.
Accordion-paneel op de verkeerde plek in de focusvolgorde
Een accordion met drie secties. Je opent Sectie 1. Er verschijnt een link in het paneel.
Cookiebanner die pas na 30 tabs bereikbaar is
Een cookiebanner onderaan het scherm. “Wij gebruiken cookies.” Twee knoppen: Accepteren en Weigeren.
Focus verdwijnt na het sluiten van een dialoogvenster
Je klikt op “Verwijderen.” Een bevestigingspopup verschijnt. “Weet je het zeker?” Je drukt op “Annuleren.”
Focus verlaat het dialoogvenster
De cookie-popup is open. Je tabt door de opties. Accepteren. Weigeren. Instellingen.
Dialoogvenster krijgt geen focus bij openen
Een popup verschijnt. “Wil je cookies accepteren?” Je drukt op Tab. En je zit in het navigatiemenu. Achter de popup. De focus is niet naar het dialoogvenster verplaatst.
Focus springt onverwacht door de pagina
Tab. Je bent in het hoofdmenu. Tab. Je bent in de sidebar. Tab. Je bent terug in het hoofdmenu. Tab. Nu ben je in de content.
Submenu dichtklappen
Toetsenbordfocus moet logisch zijn Als bezoekers met het toetsenbord door een website navigeren, moeten interactieve elementen in een logische volgorde focus krijgen. Logisch betekent: aansluitend op de visuele volgorde. Wijkt de focusvolgorde daar sterk van af, dan wordt de website moeilijk te gebruiken voor mensen die geen muis kunnen of willen gebruiken.