Ga naar hoofdinhoud

WCAG-succescriterium 2.4.7 Focus zichtbaar

Niveau AA

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).

Gerelateerde NL Design System-richtlijn

Formulieren: 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.

W3C referenties

Wat is verplicht?

De richtlijnen zijn geen wettelijke verplichting of vervanging voor WCAG.

De richtlijnen bevatten praktische uitleg en voorbeelden. Deze helpen bij het maken van toegankelijke websites en webapplicaties. WCAG 2.2 is hiervoor de basis. De richtlijnen richten zich op veelvoorkomende situaties.

Meer informatie of de wettelijke verplichting staat op de pagina "Wat is verplicht?" van DigiToegankelijk.

Help richtlijn verbeteren

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