2.4.11 focus verschijning (WCAG 2.2) – Niveau AA

Zorg dat de focus duidelijk zichtbaar is

Let op: dit is een succescriterium van versie 2.2 van de WCAG. Dit criterium is nog niet van kracht in de huidige versie van de WCAG, versie 2.1.

WCAG 2.1 stelde met criterium 2.4.7 dat een zichtbare focus verplicht is. Het moet voor gebruikers zichtbaar zijn welke componenten van de gebruikresinterface focus krijgen. Maar, dit criterium zegt niets over de weergave van de focus. WCAG 2.2 gaat hier met 2.4.11 en 2.4.12 dieper op in.

Deze richtlijn is gefocust op mensen die slecht contrasten kunnen zien en mensen die gebruik maken van het toetsenbord om door een website te navigeren.

Wat te doen:

Volgens succescriterium 2.4.12 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.