WCAG 2.4.13: Focusweergave

Wat Deze Regel Betekent

WCAG 2.4.13 Focus Appearance is een criterium op niveau AAA dat is geïntroduceerd in WCAG 2.2 en dat nauwkeurige, meetbare eisen stelt aan het visuele uiterlijk van toetsenbord-focusindicatoren. Terwijl het criterium op lager niveau 2.4.11 (Focus Not Obscured, niveau AA) ervoor zorgt dat het gefocuste element niet volledig verborgen is, en 2.4.7 (Focus Visible, niveau AA) alleen vereist dat er een of andere focusindicator bestaat, gaat 2.4.13 verder door te definiëren hoe zichtbaar die indicator moet zijn.

Om aan dit criterium te voldoen, moet de toetsenbord-focusindicator aan alle volgende voorwaarden voldoen:

• Minimale oppervlakte: De focusindicator moet een oppervlakte hebben van ten minste de omtrek van het niet-gefocuste component vermenigvuldigd met 2 CSS-pixels. In praktische termen betekent dit voor een typische rechthoekige knop dat de focusomlijning een oppervlakte moet hebben die gelijk is aan of groter is dan de omtrek van de knop maal 2px — een focusring die minstens 2px dik is rond de volledige rand voldoet.
• Contrastverhouding van de focusindicator: De pixels die de focusindicator vormen, moeten een contrastverhouding van ten minste 3:1 hebben tussen hun gefocuste en niet-gefocuste toestanden. Dus als een knop een witte achtergrond heeft in de standaardtoestand, moet de focusring eromheen ten minste 3:1 contrasteren met die witte achtergrond.
• Geen vermindering van contrast voor ingesloten inhoud: De focusindicator mag het contrast van tekst of andere inhoud binnen het gefocuste component niet verlagen tot onder 4.5:1 (voor tekst onder 18pt / 14pt vet) of 3:1 (voor grote tekst en niet-tekstuele inhoud).

Alle drie de voorwaarden moeten gelijktijdig worden vervuld voor een component om te slagen. Een focusindicator die groot genoeg is maar onvoldoende contrast heeft, faalt. Evenzo faalt een indicator met hoog contrast die te klein is.

De WCAG-specificatie definieert één opmerkelijke uitzondering: als de standaard focusindicator van de browser (de user-agent-standaard) aan de eisen voldoet, hoeft de auteur geen aangepaste stijl toe te voegen. Browserstandaarden verschillen echter aanzienlijk — op Chromium gebaseerde browsers bieden doorgaans een blauwe omlijning, terwijl Safari een ring kan weergeven die in bepaalde kleurenschema’s onvoldoende contrast heeft. Auteurs moeten verifiëren dat de standaardindicator de drempel haalt of een robuuste aangepaste stijl voorzien.

Het criterium is van toepassing op alle interactieve en focusbare componenten: links, knoppen, formulierinvoervelden, selectiemenu’s, selectievakjes, keuzerondjes, aangepaste widgetcomponenten gebouwd met ARIA-rollen, en elk element dat focusbaar is gemaakt via tabindex. Het is ook van toepassing op focusindicatoren die uitsluitend via CSS op pseudo-elementen zijn gemaakt of via door JavaScript aangestuurde class-wijzigingen.

Waarom Het Belangrijk Is

Focuszichtbaarheid is een cruciale navigatiehint voor een brede groep gebruikers. Wanneer focusindicatoren dun, laag-contrast of helemaal afwezig zijn, verliezen deze gebruikers hun ruimtelijke oriëntatie binnen een pagina — ze kunnen niet zien waar ze zijn of waar ze vervolgens naartoe kunnen.

Gebruikers die uitsluitend het toetsenbord gebruiken — waaronder mensen met motorische beperkingen zoals tremoren, verlamming of RSI — zijn volledig afhankelijk van het toetsenbord om te navigeren. Voor deze gebruikers is een onzichtbare of nauwelijks zichtbare focusindicator niet slechts een ongemak; het maakt de hele interface onbruikbaar. Volgens de Wereldgezondheidsorganisatie leven ongeveer 1,3 miljard mensen met een of andere vorm van beperking, en motorische beperkingen vormen een van de grootste categorieën onder mensen die een muis vermijden of niet kunnen gebruiken.

Slechtziende gebruikers die vergrotingssoftware gebruiken maar geen volledige schermlezer, zijn eveneens afhankelijk van de focusring om zich te oriënteren. Bij hoge zoomniveaus kan een standaardomlijning van 1px worden afgeknipt door het viewport of simpelweg onzichtbaar zijn tegen een vergelijkbare achtergrondkleur. Deze gebruikers navigeren vaak met het toetsenbord juist omdat nauwkeurig mikken met de muis moeilijk is bij hoge vergroting.

Cognitieve en aandachtsgerelateerde beperkingen zoals ADHD, angststoornissen en traumatisch hersenletsel kunnen het moeilijk maken om visuele informatie over een pagina te volgen. Een zeer zichtbare, duidelijk onderscheiden focusindicator vermindert de cognitieve belasting van navigatie door een onmiskenbaar anker te bieden voor de huidige positie van de gebruiker.

Situationele beperkingen zijn ook relevant: een ontwikkelaar die test op een laptop met lage helderheid buitenshuis, of een oudere gebruiker met leeftijdsgebonden afname van contrastgevoeligheid, kan moeite hebben met dunne of laag-contrast focusringen, zelfs zonder klinische diagnose.

Denk aan een scenario uit de praktijk: een online formulier van een bank voor het overboeken van geld bevat tien invoervelden en vier actieknoppen. Een gebruiker met de ziekte van Parkinson doorloopt het formulier met het toetsenbord. Als de focusindicator een standaard 1px gestippelde omlijning in lichtgrijs op een witte achtergrond is, kan de gebruiker niet betrouwbaar volgen welk veld hij of zij op dat moment bewerkt. De gebruiker kan per ongeluk een overboeking naar de verkeerde rekening versturen omdat niet zichtbaar was dat de focus voorbij het ontvangersveld was gegaan. Een robuuste, hoog-contrast focusomlijning had dit volledig kunnen voorkomen.

Los van toegankelijkheid is een duidelijke focusindicator een bruikbaarheidsverbetering voor alle gebruikers. Power users die vaak formulieren en menu’s via het toetsenbord bedienen — een veelvoorkomend patroon onder ontwikkelaars, data-entry professionals en schermlezergebruikers — profiteren van snelle, betrouwbare oriëntatie. Er is ook een indirect SEO-signaal: sites met sterke toegankelijkheid hebben doorgaans lagere bouncepercentages en hogere taakvoltooiing, die beide correleren met positieve rankingfactoren.

Gerelateerde Axe-core Regels

WCAG 2.4.13 vereist handmatige tests omdat geautomatiseerde tools de grootte en het contrast van een focusindicator niet volledig kunnen beoordelen in elke mogelijke browser-rendercontext. Axe-core heeft geen enkele geautomatiseerde regel die 2.4.13-fouten direct markeert. De redenen zijn technisch:

• Waarom automatisering onvoldoende is: Het exact berekenen van de pixeloppervlakte van een focusindicator vereist het simuleren van toetsenbordfocus op elk interactief element, het meten van de gerenderde omlijningsgeometrie (die afhangt van browser, besturingssysteem, zoomniveau en CSS), het berekenen van de contrastverhouding van de indicatorpixels ten opzichte van hun buren, en het verifiëren dat geen van deze de contrastvereiste voor ingesloten inhoud schendt. Geen enkele huidige geautomatiseerde toegankelijkheidsengine voert al deze stappen betrouwbaar uit voor alle componenten. Axe-core kan het ontbreken van een focusstijl signaleren (gerelateerd aan 2.4.7), maar kan niet meten of de stijl die wel aanwezig is, voldoet aan de 2.4.13-drempels voor oppervlakte en contrast.
• Gedeeltelijke dekking via focusgerelateerde regels: De focus-visible-regel van axe-core controleert of elementen überhaupt een zichtbare focusindicator hebben. Als een element outline: none of outline: 0 heeft zonder alternatieve visuele indicator, zal deze regel het markeren. Het slagen voor deze regel garandeert echter geen naleving van 2.4.13 — een element kan een technisch zichtbare omlijning hebben die nog steeds te dun of te laag-contrast is.
• Handmatig testen is de gezaghebbende methode: Testers moeten elk interactief component visueel inspecteren in gefocuste toestand, de afmetingen van de omlijning meten of schatten, en contrastverhoudingen verifiëren met een kleurcontrast-analyzer. Daarom vermeldt WCAG 2.4.13 als een criterium dat voor axe-core-doeleinden uitsluitend handmatig getest kan worden.

Hoe te Testen

1. Geautomatiseerde scan (alleen gedeeltelijk signaal): Voer axe DevTools of Lighthouse uit op de pagina. Zoek naar fouten gerelateerd aan focus-visible of focus-order-semantics. Hoewel deze niet direct 2.4.13-overtredingen markeren, kunnen ze elementen aan het licht brengen waar focusstyling volledig is onderdrukt, wat een voorafgaande fout is. Open in Chrome DevTools het Accessibility-paneel en gebruik de "Tab"-inspectiemodus om door focusbare elementen te bladeren.
2. Visuele toetsenbordnavigatietest: Koppel je muis los of leg deze weg. Druk op Tab om door elk interactief element op de pagina te gaan. Inspecteer voor elk gefocust element de focusindicator visueel. Vraag jezelf af: Is er een duidelijk zichtbare ring of andere indicator? Lijkt deze minstens 2px dik? Steekt hij sterk af tegen de omringende achtergrond? Noteer alle elementen waarbij je aarzelt of moeite hebt om te zien waar de focus is.
3. Contrastmeting: Gebruik de WebAIM Contrast Checker of de desktoptool Colour Contrast Analyser. Maak, met de focus op een component, een screenshot. Bemonster de kleur van de focusindicatorpixels en de kleur van de achtergrond direct ernaast. Verifieer dat de contrastverhouding ten minste 3:1 is.
4. Afmetingsmeting: Gebruik de DevTools van de browser (Chrome of Firefox). Selecteer een gefocust element en inspecteer de berekende stijlen. Controleer de outline-width, outline-offset en eventuele box-shadow die als focusring wordt gebruikt. Vermenigvuldig de omtrek van het element (2 × breedte + 2 × hoogte) met 2px om de minimale oppervlakte te berekenen. Verifieer dat de gerenderde oppervlakte van de indicator deze waarde haalt of overschrijdt.
5. Schermlezer + toetsenbordtest (NVDA + Firefox): Open de pagina in Firefox met NVDA actief. Navigeer met Tab en pijltoetsen. Bevestig dat de visuele focusindicator synchroon beweegt met de door NVDA aangekondigde focus. Let extra op aangepaste widgets (carrousels, modals, accordeons) waar focusbeheer via JavaScript kan worden afgehandeld.
6. VoiceOver + Safari (macOS/iOS): Schakel VoiceOver in met Command + F5. Gebruik Tab om door interactieve elementen te navigeren. Verifieer dat de VoiceOver-cursor (het zwarte omlijningsvak) geen vervanging is voor een correcte CSS-focusindicator — de pagina zelf moet er onafhankelijk een bieden.
7. Test in hoog-contrastmodus: Schakel op Windows de Hoog Contrast-modus in (Instellingen → Toegankelijkheid → Hoog contrast). Herlaad de pagina en herhaal de toetsenbordnavigatietest. Sommige CSS-focusstijlen worden in hoog-contrastmodus door het besturingssysteem overschreven; verifieer dat er nog steeds een zichtbare indicator verschijnt. Gebruik de CSS-mediaquery forced-colors: active om indien nodig stijlen conditioneel aan te passen.

Hoe te Herstellen

Standaard browseromlijning verwijderd — Onjuist

<!-- Veel stylesheets onderdrukken globaal de standaard focusomlijning -->
<style>
  * {
    outline: none; /* Verwijdert ALLE focusindicatoren site-breed */
  }
  a:focus, button:focus {
    outline: 0; /* Overbodige verwijdering; geen vervanging voorzien */
  }
</style>
<button>Submit Payment</button>

Standaard browseromlijning verwijderd — Juist

<!-- Verwijder de standaard alleen wanneer je een betere aangepaste indicator biedt -->
<style>
  /* Onderdruk de standaardomlijning alleen wanneer :focus-visible van toepassing is, en bied dan een sterke vervanging */
  :focus-visible {
    outline: 3px solid #0057b8; /* 3px zorgt ervoor dat aan de oppervlakte-eis wordt voldaan voor typische elementen */
    outline-offset: 2px;       /* Offset scheidt de indicator van de rand van het element voor duidelijkheid */
  }
  /* Respecteer forced-colors (Windows Hoog Contrast) door systeemtrefwoorden te gebruiken */
  @media (forced-colors: active) {
    :focus-visible {
      outline: 3px solid ButtonText;
    }
  }
</style>
<button>Submit Payment</button>

Focusring met laag contrast op gekleurde achtergrond — Onjuist

<style>
  .cta-button {
    background-color: #0057b8;
    color: #ffffff;
  }
  .cta-button:focus {
    outline: 2px solid #3399ff; /* Lichtblauwe omlijning op donkerblauwe achtergrond: contrastverhouding ~1.4:1 — faalt */
  }
</style>
<button class='cta-button'>Book Now</button>

Focusring met laag contrast op gekleurde achtergrond — Juist

<style>
  .cta-button {
    background-color: #0057b8;
    color: #ffffff;
  }
  .cta-button:focus-visible {
    /* Witte omlijning contrasteert sterk met de donkerblauwe knop (contrast ~8:1) */
    outline: 3px solid #ffffff;
    outline-offset: 2px;
    /* Een donkere offset box-shadow achter de witte ring zorgt voor contrast tegen lichte paginabackgrounds */
    box-shadow: 0 0 0 5px #0057b8;
  }
</style>
<button class='cta-button'>Book Now</button>

Aangepaste interactieve widget op basis van div zonder focusstijl — Onjuist

<style>
  .tab-item { cursor: pointer; padding: 12px 20px; }
  /* Geen :focus- of :focus-visible-stijl gedefinieerd voor aangepaste tab */
</style>
<div role='tab' tabindex='0' class='tab-item'>Reservations</div>

Aangepaste interactieve widget op basis van div zonder focusstijl — Juist

<style>
  .tab-item {
    cursor: pointer;
    padding: 12px 20px;
    border-radius: 4px;
  }
  /* Expliciete :focus-visible-stijl — outline-width 3px met offset voldoet aan de oppervlaktegrens */
  .tab-item:focus-visible {
    outline: 3px solid #d4550a; /* 3:1+ contrast tegen witte achtergrond */
    outline-offset: 3px;
  }
</style>
<div role='tab' tabindex='0' class='tab-item'>Reservations</div>

Dunne box-shadow gebruikt als focusindicator — Onjuist

<style>
  .form-input:focus {
    outline: none;
    /* 1px box-shadow-spreiding: waarschijnlijk te klein in oppervlakte voor de meeste invoervelden */
    box-shadow: 0 0 0 1px #005fcc;
  }
</style>
<input type='text' class='form-input' placeholder='Your email' />

Dunne box-shadow gebruikt als focusindicator — Juist

<style>
  .form-input:focus-visible {
    outline: none;
    /*
      3px spreiding biedt voldoende oppervlakte rond een typisch invoerveld van 300px breed.
      #005fcc op witte achtergrond levert ~5.9:1 contrast op — voldoet aan zowel 2.4.13 (3:1) als 1.4.3 (4.5:1).
    */
    box-shadow: 0 0 0 3px #005fcc;
  }
</style>
<input type='text' class='form-input' placeholder='Your email' />

Veelvoorkomende Fouten

• Gebruik van outline: none in een CSS-reset zonder een vervangende focusindicator te bieden. Veel populaire CSS-resets (oudere versies van Normalize.css, aangepaste resets) verwijderen omlijningen in één keer. Koppel verwijdering altijd aan een :focus-visible-vervanging die aan de eisen voor grootte en contrast voldoet.
• Alleen een focusstijl bieden voor :focus maar niet voor :focus-visible, waardoor muisklik-focusringen op knoppen zichtbare muisgebruikers irriteren — wat ertoe leidt dat ontwikkelaars ze volledig verwijderen in plaats van de juiste pseudo-class-scheiding te gebruiken.
• Een focusringkleur kiezen die sterk lijkt op de achtergrondkleur van het component. Bijvoorbeeld, een lichtblauwe #99ccff-ring op een witte #ffffff-achtergrond heeft een contrastverhouding van ongeveer 1.5:1, ver onder de vereiste 3:1.
• Gebruik van outline-width: 1px op kleine componenten zoals pictogramknoppen of selectievakjes. Een ring van 1px rond een pictogram van 24×24px heeft een oppervlakte van ongeveer 96 vierkante pixels, maar de vereiste minimale oppervlakte voor een element van 24×24 is (24+24+24+24) × 2 = 192 vierkante pixels — precies 2px dik. Een omlijning van 1px faalt in deze berekening.
• Vergeten om de focusweergave te testen op aangepaste ARIA-widgets zoals role='combobox', role='listbox' of role='slider'. Deze componenten hebben vaak door JavaScript beheerde focus die native CSS-pseudo-klassen omzeilt, tenzij expliciet afgehandeld.
• Een focusstijl alleen toepassen op a- en button-tags en input, select, textarea en elk element met tabindex='0' verwaarlozen.
• Focusstijlen diep in een componentbibliotheek of third-party widget overschrijven zonder te beseffen dat de overschrijving de zichtbare indicator verwijdert. Veelvoorkomende boosdoeners zijn UI-kits zoals Bootstrap 4 (die box-shadow instellen op een subtiele gloed) die mogelijk niet voldoen aan de 2.4.13-drempel.
• De focusweergave niet testen in de Hoog Contrast-modus van Windows. Sommige CSS-outline- en box-shadow-technieken worden onzichtbaar weergegeven in Hoog Contrast-modus. Gebruik het blok @media (forced-colors: active) om een zichtbare fallback op basis van systeemkleuren te garanderen.
• Gebruik van outline-offset met een zeer grote negatieve waarde om de omlijning binnen de rand van het element te verplaatsen. Dit kan ertoe leiden dat de indicator overlapt met de achtergrond van het element, waardoor het effectieve contrast onder 3:1 daalt.
• Aannemen dat de focusindicator op een bovenliggend container-element voldoende is voor onderliggende interactieve elementen. Elk focusbaar element moet onafhankelijk aan het criterium voldoen; een gemarkeerde rij in een tabel voldoet niet aan de eis voor een linkcel binnen die rij.

Relatie met de Toegankelijkheidsregelgeving van Turkije

De Turkse Presidentiële Circulaire 2025/10, gepubliceerd in Staatsblad nr. 32933 op 21 juni 2025, stelt bindende toegankelijkheidseisen voor web en mobiel vast voor een brede groep entiteiten die in Turkije actief zijn. De circulaire neemt WCAG 2.2 over als technische referentiestandaard en verplicht conformiteit op niveau AA voor de betrokken entiteiten. WCAG 2.4.13 Focus Appearance is een criterium op niveau AAA en wordt daarom niet rechtstreeks door de circulaire verplicht voor standaardconformiteit.

De reikwijdte van de circulaire is echter zeer breed. Betrokken entiteiten zijn onder meer overheidsinstellingen en -agentschappen, banken en aanbieders van financiële diensten, ziekenhuizen en zorgorganisaties, telecomoperators met 200,000 of meer abonnees, e-commerceplatforms, reisbureaus, particuliere vervoersbedrijven en particuliere scholen die zijn gemachtigd door het Ministerie van Nationaal Onderwijs (MoNE). Voor al deze organisaties geeft het aantonen van conformiteit op niveau AAA voor toepasselijke criteria — waaronder 2.4.13 — blijk van een streven naar toegankelijkheid op topniveau dat de wettelijke ondergrens overstijgt.

Er zijn praktische en reputatiegebonden redenen voor betrokken Turkse entiteiten om 2.4.13 vrijwillig te implementeren. Banken en aanbieders van financiële diensten bedienen in het bijzonder klanten met motorische beperkingen die voor veilige transacties afhankelijk zijn van toetsenbordnavigatie. Een Turkse online bankomgeving die voldoet aan 2.4.13 gaat niet alleen verder dan de regelgeving vereist, maar verkleint ook het risico op gebruikersfouten en toont maatschappelijke verantwoordelijkheid. Evenzo zouden ziekenhuizen en zorgportalen waar patiënten afspraken maken of medische dossiers raadplegen ervoor moeten zorgen dat alle gebruikers — waaronder oudere patiënten met verminderde fijne motoriek of slecht zicht — die interfaces met vertrouwen kunnen bedienen.

Telecomoperators met grote abonneebestanden behoren tot de meest bezochte digitale diensten in Turkije. Hun klantenportalen en selfservice-applicaties bereiken miljoenen gebruikers, waaronder een aanzienlijk aandeel oudere volwassenen en gebruikers met een beperking. Vrijwillige implementatie van 2.4.13 op deze platforms zorgt voor gelijke toegang voor alle abonnees en positioneert de operator gunstig bij eventuele toekomstige aanscherping van regelgeving die verplichte conformiteit met AAA-criteria zou kunnen uitbreiden.

Voor organisaties die volledige WCAG 2.2 AAA-conformiteit willen bereiken — of dat nu wordt gedreven door aanbestedingseisen, export naar EU-markten die onder de European Accessibility Act vallen, of interne toegankelijkheidsbeleid — is implementatie van 2.4.13 een noodzakelijk onderdeel. De overlay-SDK van Accsible biedt configureerbare focusversterkingsfuncties die organisaties kunnen helpen sterke, conforme focusindicatoren in hun interfaces zichtbaar te maken, als aanvulling op de CSS-aanpassingen op auteursniveau die in dit artikel worden beschreven.