Ga naar de inhoud

Niet iedereen navigeert door een website via een muis en toetsenbord. Sommige mensen zijn beperkt tot het gebruik van alleen het toetsenbord. Een reden hiervan kan bijvoorbeeld een mobiliteitsbeperking zijn, waardoor nauwkeurig gebruik van de muis moeilijk is. 

Deze groep navigeert dus met het toetsenbord door websites heen. Via de tab-toets wordt de volgende selecteerbare optie gekozen, shift + tab stuurt de gebruiker naar de vorige keuze. Er zijn talloze handige trucjes beschikbaar voor webdesigners en -developers. Denk aan het bieden voor een skipmechanisme of veelvoorkomende items over te slaan (2.4.1), het aanbieden van content in de juiste volgorde (2.4.3) en het zichtbaar maken van de focus (2.4.7)

WCAG 2.2 helpt toetsenbordgebruikers met het succescriterium 2.4.11 door verder in te gaan op de weergave van focus. In dit artikel worden het nieuwe criteria toegelicht.

Screenshot van Digitaaltoegankelijk.nl waar de focus zichtbaar is
Op dit screenshot is de focus te zien op DigitaalToegankelijk.nl. Het geselecteerde element is omcirkeld door zwarte bolletjes. Hierdoor is duidelijk waar de focus op de webpagina ligt.

De content van succescriteria 2.4.11

Versie 2.1 van de WCAG heeft criterium 2.4.7 (zichtbare focus) opgenomen in de lijst. Volgens dit criterium moet de focus van geselecteerde gebruikselementen zichtbaar zijn. Super handig voor toetsenbordgebruikers. Maar, er wordt niet aangegeven hoe de focus zichtbaar gemaakt moet worden. 

Zo kan een website met een focus van 1 px groot technisch gezien voldoen aan dit criterium, terwijl het voor gebruikers niet duidelijk is waar zij zich bevinden op een website. Om het uiterlijk van focus te standaardiseren, is WCAG 2.4.11 in het leven geroepen.

WCAG 2.4.11 behoort tot niveau AA en is daarmee direct verplicht voor (semi-)overheidswebsites wanneer de WCAG 2.2 ingaat. Vanaf 2025 zijn niveau A en niveau AA ook verplicht voor commerciële webshops, volgens de European Accessibility Act. Hieronder vind je informatie over hoe jouw website aan WCAG 2.4.11 kan voldoen.

Voldoen aan succescriterium 2.4.11

Volgens succescriterium 2.4.11 moet de focus van interactieve elementen voldoen aan de volgende voorwaarden:

  • Contrastgebied: minstens een contrastverhouding hebben van 3,0:1 met de kleur die het element heeft wanneer het geen focus ontvangt.
  • Minimaal gebied: het rand van het contrastgebied is minstens 1 CSS pixel dik óf de kortste zijde van de focusvorm is minstens 4 CSS pixels dik en over het algemeen niet dunner dan 2 CSS pixels. 
  • Aangrenzend contrast: het contrastgebied heeft een contrastverhouding van 3,0:1 ten opzichte van aangrenzende kleuren, zoals de achtergrondkleur, óf het contrastgebied heeft een dikte van ten minste 2 CSS-pixels.
  • Niet volledig verborgen: het item van de gebruikersinterface dat focus krijgt is niet volledig verborgen door andere inhoud op de pagina.
Vincent van Brakel

Vincent van Brakel onderzoekt voor Digitaal Toegankelijk de toegankelijkheid van websites en apps. Daarnaast schrijft Vincent over alles wat met digitale toegankelijkheid te maken heeft en deelt hij praktische tips op DigitaalToegankelijk.nl.