Ga naar hoofdinhoud

WCAG

WCAG-succescriterium 2.4.7 Focus zichtbaar

Niveau AA

W3C referenties

Uitleg

Zorg dat het goed zichtbaar is welk element de toetsenbordfocus heeft, wanneer je door de website navigeert met een toetsenbord of vergelijkbare bediening. Dit kan bijvoorbeeld door het gebruik van een focusring (outline).

Let op: voor het NL Design System willen we ook voldoen aan het WCAG-succescriterium 2.4.13 Focusweergave (niveau AAA), dat eisen stelt aan de weergave en het kleurcontrast van de focusring. Dit staat beschreven bij de richtlijn Maak de toetsenbordfocus goed zichtbaar. Het intact houden van de browser-outline is voldoende voor WCAG-succescriterium 2.4.7 (versie 2.2 niveau AA) maar in de praktijk is die focusring niet voldoende duidelijk in alle situaties.

Gerelateerde NL Design System-richtlijn

Formulieren - Visueel Ontwerp: Maak de toetsenbordfocus goed zichtbaar.

Bronnen

A guide to designing accessible, WCAG-conformant focus indicators van Sara Soueidan.

Gebruikersonderzoek

Heb je gebruikersonderzoek gedaan dat betrekking heeft op dit succescriterium en wil je dit delen? Kijk eens bij Gebruikersonderzoeken delen op gebruikersonderzoeken.nl.

Hoe te testen

Het moet duidelijk te zien zijn waar de toetsenbordfocus zich bevindt. Gebruik de tab-toets om te controleren of links, buttons, invoervelden en checkboxes duidelijk zichtbaar de focus aangeven. Controleer de focus van radiobuttons en tabs met de pijltjestoetsen.

Als in de CSS de outline is verwijderd (outline: none;), moet er een alternatief zijn die de toetsenbordfocus visueel aangeeft, bijvoorbeeld door het toevoegen een CSS-border.

Additionele testen:

  • de skip link wordt zichtbaar als deze toetsenbord krijgt.
  • de outline (of het alternatief) is goed zichtbaar in dark- en in light-mode, als deze optie aangeboden wordt op de webpagina.

Aanvullingen of opmerkingen?

Deze pagina's over WCAG worden onderhouden door het NL Design System. Heb je aanvullingen of opmerkingen? Deel je mening op GitHub.