Focus states ontwerpen: complete gids voor toegankelijke websites

Focus states ontwerp je door ieder bedienbaar element bij toetsenbordfocus een duidelijke, contrastrijke en niet-afgedekte visuele indicator te geven. Gebruik bij voorkeur :focus-visible, behoud een zichtbare outline of ring en test de volledige pagina met de Tab-toets. Zo weten bezoekers die zonder muis navigeren altijd waar zij zijn, ook in menu’s, formulieren, pop-ups en sticky onderdelen.

Wat is een focus state?

Een focus state is de visuele toestand van een interactief element dat op dat moment toetsenbordinvoer ontvangt. Drukt een bezoeker op Tab, dan verplaatst de focus bijvoorbeeld naar een link, knop, invoerveld of menu-item. De focus indicator maakt die positie zichtbaar.

Dit is iets anders dan een hover state. Hover verschijnt wanneer een muisaanwijzer boven een element staat. Focus ontstaat onder meer via toetsenbordnavigatie. Een active state laat doorgaans zien dat iemand een knop indrukt; een selected state toont een gemaakte keuze. Ontwerp en bouw deze states afzonderlijk: zij hebben elk een andere functie.

Waarom zichtbare toetsenbordfocus belangrijk is

Niet iedereen gebruikt een muis. Bezoekers kunnen navigeren met een toetsenbord, alternatieve invoer of hulpmiddelen die op toetsenbordinteractie steunen. Zonder focus indicator is het onduidelijk welk element als volgende wordt geactiveerd. Dat maakt een formulier, navigatie of offerte-aanvraag onnodig lastig of zelfs onbruikbaar.

Focus states zijn daarom een vast onderdeel van professioneel webdesign, naast heldere content, voldoende contrast en logische navigatie. Bij strategisch creatief webdesign hoort deze interactielaag vanaf het ontwerp mee te lopen, niet pas als laatste controlepunt.

Welke WCAG-principes zijn relevant?

Voor focus indicators zijn vooral deze WCAG 2.2-succescriteria van belang:

• 2.4.7 Focus Visible: de toetsenbordfocus moet zichtbaar zijn.
• 1.4.11 Non-text Contrast: de visuele indicator moet voldoende onderscheidend zijn van relevante aangrenzende kleuren.
• 2.4.11 Focus Not Obscured (Minimum): een component met focus mag niet volledig verborgen raken, bijvoorbeeld achter een sticky header, cookiebanner of footer.
• 2.4.13 Focus Appearance: dit AAA-criterium gaat verder in de eisen aan de zichtbaarheid van de focusindicator.

Zie deze criteria als ontwerp- én ontwikkelopgave. Een mooie focus ring die op een donkere sectie wegvalt, voldoet niet aan het doel. Een technisch aanwezige focus die achter een cookie-overlay verdwijnt evenmin.

Focus states ontwerpen: vijf uitgangspunten

1. Maak de indicator direct herkenbaar. Gebruik een duidelijke outline, ring, rand of combinatie daarvan. Vertrouw niet uitsluitend op een subtiele kleurwisseling van de knopachtergrond.
2. Kies een kleur die op alle achtergronden werkt. Een accentkleur kan op een witte kaart prima zichtbaar zijn en op een donkere hero verdwijnen. Werk daarom waar nodig met een dubbele ring of een contrasterende buitenrand.
3. Houd afstand tot het element. Met ruimte tussen ring en component blijft de vorm leesbaar. CSS outline-offset is hiervoor vaak bruikbaar.
4. Volg de vorm van het component. Een ronde knop krijgt idealiter een focus indicator die de ronde vorm volgt. Bij een tekstlink kan een onderstreping met duidelijke outline beter passen dan een rechthoek om een hele alinea.
5. Ontwerp alle varianten. Controleer niet alleen de standaardknop, maar ook primaire, secundaire, donkere, lichte, uitgeschakelde en foutvarianten. Doe hetzelfde voor links in tekst, navigatie en footers.

Praktische scorecard per component

Gebruik onderstaande scorecard tijdens een ontwerpreview of acceptatietest. De laatste kolom bevat een concrete actie, zodat je niet blijft steken bij de constatering dat iets ‘beter moet’.

Component	Goede focus state	Veelvoorkomend risico	Concrete actie
Tekstlink in een alinea	Een duidelijke outline of extra onderstreping die losstaat van de gewone linkstijl.	Alleen een subtiele kleurverandering, waardoor focus en gewone link nauwelijks verschillen.	Voeg :focus-visible toe met outline en voldoende ruimte rond de link.
Primaire knop	Een contrasterende ring buiten de knop, zichtbaar op lichte en donkere secties.	De ring heeft vrijwel dezelfde kleur als de knop of achtergrond.	Test de knop op iedere achtergrondvariant en gebruik zo nodig een dubbele ring.
Formulierveld	Een zichtbare rand of ring rond het hele veld, zonder dat label of foutmelding verdwijnt.	Alleen placeholdertekst of een lichte schaduw verandert.	Geef invoervelden een eigen focusstijl en test ook fout- en ingevulde states.
Hoofdnavigatie	Het actuele menu-item is duidelijk gemarkeerd, ook in uitklapmenu’s.	Focus verdwijnt zodra een submenu opent of valt achter een sticky header.	Doorloop menu en submenu volledig met Tab, Shift+Tab, Enter en Escape.
Cookiebanner of modal	Focus blijft binnen het geopende venster en het gefocuste element blijft zichtbaar.	Tab springt naar inhoud achter de overlay of focus valt onder de overlay.	Test de tabvolgorde en herstel focus naar de opener bij sluiten.
Icon-only knop	De volledige klikzone krijgt een duidelijke focusring.	Alleen het kleine icoon krijgt een nauwelijks zichtbare stijl.	Pas focus toe op de knop, niet alleen op het SVG-icoon.

:focus en :focus-visible correct gebruiken

De pseudo-klasse :focus selecteert een element met focus. Gebruik je die zonder verdere keuze, dan kan de focusstijl ook verschijnen bij een muisklik. Dat is niet per se verkeerd, maar kan visueel onrustig zijn. Met :focus-visible kun je de duidelijke indicator tonen wanneer de browser verwacht dat deze voor de gebruiker nodig is, bijvoorbeeld bij toetsenbordnavigatie.

/* Verwijder de browserfocus niet zonder een volwaardig alternatief */
:focus-visible {
  outline: 3px solid #005fcc;
  outline-offset: 3px;
}

/* Voor een component met een eigen vorm */
.button:focus-visible {
  outline: 3px solid #ffffff;
  outline-offset: 3px;
  box-shadow: 0 0 0 6px #005fcc;
}

De tweede stijl is vooral nuttig wanneer een enkele kleur op de achtergrond onvoldoende opvalt. Beoordeel de gekozen kleuren altijd in de echte interface, inclusief afbeeldingen, kleurvlakken en hoverstates.

Vermijd deze aanpak:

:focus {
  outline: none;
}

Hiermee verwijder je een belangrijke browservoorziening. Doe je dit toch als onderdeel van een componentstijl, voeg dan in dezelfde wijziging een duidelijk en getest alternatief toe. De W3C CSS-techniek C15 beschrijft het wijzigen van de presentatie van een interfacecomponent wanneer deze focus ontvangt.

Focus states in WordPress controleren

In WordPress kunnen focusstijlen uit het thema, een block theme, een page builder, een plugin of eigen CSS komen. Daardoor is een globale stijl niet altijd genoeg. Een formulierplugin, mega menu of pop-upplugin kan eigen CSS laden en de focusindicator overschrijven.

1. Open de website in een browser en klik eerst buiten de pagina, bijvoorbeeld in de adresbalk.
2. Druk op Tab en volg de focus vanaf het eerste bereikbare element.
3. Noteer elk onderdeel waarop de indicator ontbreekt, wegvalt of wordt afgedekt.
4. Gebruik browser developer tools om te zien welke CSS-regel de outline verwijdert of overschrijft.
5. Leg een basisstijl vast in het thema of de eigen stylesheet en voeg waar nodig gerichte componentstijlen toe.
6. Test daarna opnieuw op pagina’s met afwijkende templates, zoals de homepage, dienstenpagina, blog, zoekresultaten en contactformulier.

Bij themawijzigingen, pluginupdates en nieuwe templates is deze controle onderdeel van kwaliteitsbewaking. Controleer ook of interne links bruikbaar blijven. Een foutieve bestemming is een ander probleem, maar net zo frustrerend voor bezoekers. Lees daarvoor onze gids over 404- en soft-404-fouten oplossen.

Testen met alleen het toetsenbord

Een praktische toets is eenvoudig: leg de muis weg en gebruik uitsluitend het toetsenbord. Volg daarbij deze stappen.

1. Start bovenaan. Controleer of een skiplink, logo, hoofdmenu en eventuele zoekfunctie logisch bereikbaar zijn.
2. Volg de visuele volgorde. De focus moet logisch door de pagina bewegen. Een onverwachte sprong is vaak een signaal van een probleem in HTML-structuur of componentgedrag.
3. Controleer zichtbaarheid. Kijk op elke stap of je onmiddellijk ziet waar de focus is, ook op drukke achtergronden.
4. Open interactieve onderdelen. Test dropdowns, accordions, tabs, filters, sliders, modals en cookiebanners met de relevante toetsen.
5. Test terugnavigatie. Gebruik Shift+Tab. Focus moet niet vastlopen en ook niet onverwacht achteruit springen.
6. Controleer vaste elementen. Scroll door de pagina met een sticky header, chatwidget of banner actief. Het gefocuste element mag niet volledig uit beeld raken.
7. Herhaal op mobiel formaat. Een responsive layout kan knoppen verplaatsen, menu’s veranderen en focus achter vaste mobiele balken laten verdwijnen.

Veelgemaakte fouten

• Outline verwijderen zonder alternatief: de standaard browserfocus verdwijnt en gebruikers verliezen hun positie.
• Alleen kleur veranderen: de verandering is vaak te subtiel en werkt niet op iedere achtergrond.
• Focus en hover gelijk behandelen: een toetsenbordgebruiker heeft een betrouwbare, blijvende aanwijzing nodig, geen effect dat voor een muis is ontworpen.
• Alleen de standaardpagina testen: problemen zitten vaak in formulieren, menu’s, pop-ups, filters en footerlinks.
• Focus achter vaste interface verbergen: headers, cookiebanners en chatwidgets kunnen de indicator onbruikbaar maken.
• Een custom component als gewone tekst bouwen: als iets zich als knop gedraagt, moet het ook als knop focus kunnen ontvangen en bedienen.

Wanneer schakel je een webdesignpartner in?

Bij een nieuwe website is focusgedrag het efficiëntst als onderdeel van het design system en de componentbibliotheek. Bij een bestaande WordPress-site is een gerichte audit verstandig wanneer meerdere thema- en pluginlagen samenkomen, of wanneer formulieren, menu’s en overlays niet consistent reageren. LYNX helpt bedrijven met ontwerp, ontwikkeling en optimalisatie binnen webdesign, SEO en online marketingdiensten. Wil je toetsenbordtoegankelijkheid structureel meenemen in je website? Bespreek je website of online groeikansen met LYNX Media.

Checklist: focus states ontwerpen en opleveren

• Elk bedienbaar element heeft een zichtbare focus state.
• De indicator onderscheidt zich op alle relevante achtergronden.
• Focus is niet uitsluitend afhankelijk van kleur.
• De focusstijl is aanwezig voor links, knoppen, velden, menu-items en icon-only knoppen.
• De focus blijft zichtbaar bij hover, active, fout- en ingevulde states.
• Sticky headers, banners en overlays verbergen het gefocuste element niet volledig.
• Modals en menu’s zijn volledig met het toetsenbord te gebruiken.
• De tabvolgorde volgt de logische lees- en bedienvolgorde.
• De implementatie is getest op desktop- en mobiele layouts.
• Updates aan thema, plugins en templates worden opnieuw gecontroleerd.