Focusweergave

Wat het vereist

2.4.7 (Focus zichtbaar) stelt dat de indicator moet bestaan. 2.4.13 (Focusweergave) bepaalt precies hoe die eruit moet zien. Om te slagen, moet de focusindicator:

1. Een oppervlak hebben dat ten minste zo groot is als een doorlopende omtrek van 2 CSS-pixels rondom het gefocuste bedieningselement, of een lijn van 1 px dik met hetzelfde totale oppervlak.
2. Een contrast van 3:1 bereiken tussen de gefocuste en ongefocuste toestand van dezelfde pixels.
3. Niet worden bedekt door andere inhoud (wat ook het domein is van 2.4.11 / 2.4.12).

Dit is de eerste keer dat WCAG getallen heeft vastgelegd voor focusopmaak, en het heeft de manier waarop ontwerpsystemen met toetsenbordstijlen omgaan ingrijpend veranderd. Verwacht dat elke toegankelijkheidsaudit in 2026 dit succescriterium met name zal noemen.

Hoe te voldoen

• Gebruik een doorlopende omtrek van ten minste 2 px dik. Gangbaar patroon: outline: 2px solid currentColor; outline-offset: 2px;.
• Kies een focuskleur die 3:1 bereikt ten opzichte van de aangrenzende kleur, niet alleen de paginaachtergrond — knoppen bevinden zich op hovertoestanden, verlopen en afbeeldingen.
• Lever voor de donkere en lichte modus twee focuskleuren en schakel daartussen via prefers-color-scheme of tokenstyling.
• Vermijd te vertrouwen op een gloed of box-shadow-ring met laag contrast; gebruik bij box-shadow een harde rand en voldoende dikte.
• Geef de voorkeur aan :focus-visible zodat muisgebruikers de ring niet zien, maar zorg dat dit bij elke toetsenbordfocus activeert, inclusief programmatische focus.

:focus-visible {
  outline: 2px solid #1d4ed8;       /* 3:1 ten opzichte van wit en grijze hovertoestanden */
  outline-offset: 2px;
  border-radius: inherit;
}

Veelvoorkomende fouten

• Focusringen van 1 px (standaard in de meeste browsercomponentbibliotheken vóór 2023).
• Merkblauwe focusringen op een merkblauwe knophoverstand — identieke kleur, contrast 1:1.
• Focus opgemaakt uitsluitend met een zachte box-shadow zonder gedefinieerde rand, die verdwijnt tegen patroneerde achtergronden.
• Aangepaste invoervelden waarbij de focusstatus alleen de randkleur wijzigt maar niet de dikte of het contrast — te subtiel om te tellen.
• „Inset“-focusringen op kleine icoorknoppen die binnen het 16×16 raakoppervlak worden getekend en onzichtbaar worden achter de icoonvorm.
• Componenten die slagen op witte achtergronden maar falen in de donkere-modusvariант die niemand heeft getest.

Praktische contrastchecklist

Maak voor elk interactief component een lijst van alle oppervlaktoestanden waarop het kan staan (standaard, hover, ingedrukt, uitgeschakeld, in een kaart, in een modaal, op een heldenafbeelding) en controleer of de focusring in elk geval 3:1 bereikt. Dit is arbeidsintensief; componentbibliotheken die dit niet doen, worden geleverd met verborgen fouten. Storybook gecombineerd met pa11y- of axe-playwright-automatisering loont hier.

Waarom dit belangrijk is

2.4.13 sluit de meest voorkomende maas in 2.4.7: een focusring die technisch bestaat, maar te dun, te laagcontrastig of te positiegeknipt is om bruikbaar te zijn. Slechtziende gebruikers die afhankelijk zijn van de ring om de focus bij te houden, krijgen een meetbare, toetsbare garantie. Ontwerpers krijgen een duidelijke regel die zij vóór het uitleveren kunnen valideren in plaats van achteraf over te onderhandelen.

Zelfs teams die formeel uitsluitend AA nastreven, adopteren 2.4.13 op grote schaal als doel, omdat faalmodi eenvoudig te herkennen zijn in audits en gemakkelijk kunnen worden ingezet in rechtszaken. Als slechts één AAA-succescriterium uit WCAG 2.2 wordt overgenomen, is dit het de aangewezen keuze.