Focus
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.
Focus die alleen een kleurverandering is
Een link. Bij focus wordt de tekst blauw. Dat is de focusindicator. Geen outline. Geen onderstreping. Geen achtergrondverandering. Alleen: de tekst verandert van kleur.
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.
Custom component waarvan de focus is vergeten
Een zelfgebouwde tabcomponent. Mooie styling. Hover-effecten. Transities. Tab ernaartoe. Geen focusindicator. De developer heeft border: none en outline: none in de component-CSS gezet om de standaardstyling te verwijderen. En is vergeten een :focus-visible toe te voegen.
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.