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

• Engelse tekst van het WCAG-succescriterium: 2.4.7 Focus Visible.
• Nederlandse vertaling van het WCAG-succescriterium: 2.4.7 Focus zichtbaar.
• Engelstalige informatie op How to Meet WCAG: Quick Reference 2.4.7 Focus Visible.
• Engelstalige toelichting: Understanding SC 2.4.7 Focus Visible.

De richtlijnen zijn geen wettelijke verplichting of vervanging voor WCAG. Ze zijn een praktische uitleg met voorbeelden die helpen bij het toegankelijk inzetten van NL Design System. Meer informatie of de wettelijke verplichting staat op de pagina wat is verplicht van DigiToegankelijk.

Help richtlijn verbeteren

Deel je mening op GitHub of bezoek onze actieve community op Slack.