Ga naar hoofdinhoud

WCAG

WCAG-succescriterium 2.4.13 Focusweergave

Niveau AAA

Let op: Voor het NL Design System houden de richtlijnen van WCAG 2.2 AA aan, maar we willen we ook voldoen aan dit WCAG-succescriterium 2.4.13 Focusweergave, niveau AAA.

Het intact laten van de standaard outline die door een browser wordt geleverd is voldoende voor het WCAG-succescriterium 2.4.7 Focus zichtbaar. Maar in de praktijk is deze standaard outline niet altijd duidelijk genoeg. Elke browser hanteert een eigen stijl voor de outline. Hierdoor kun je niet op de standaard browser-outline vertrouwen voor een consistente, goed zichtbare focus.

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. Het moet duidelijk te zien zijn waar de toetsenbordfocus zich bevindt.

Een optie is het geven van een outline (focusring). Dit kan via de CSS-properties outline of border.

Geef de outline:

  • een dikte van minimaal 2 CSS-pixels;
  • een kleurcontrast van ten minste 3:1 ten opzichte van de aangrenzende kleuren;
  • een kleurcontrast van ten minste 3:1 tussen dezelfde pixels in de gefocuste en niet-gefocuste staat.

Een andere optie is geen outline toepassen, maar het hele element van kleur te laten veranderen. Bijvoorbeeld een button die van kleur verandert bij toetsenbordfocus. Ook hier geldt een kleurcontrast van ten minste 3:1 tussen dezelfde pixels in de gefocuste en niet-gefocuste staat.

Gerelateerde NL Design System-richtlijnen

Bronnen

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

Gebruikersonderzoek

In het onderzoek van het Contactformulier voor WMEBV staat het advies: zorg voor een zichtbare focusindicator voor mensen met een visuele beperking.

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 door de CSS outline: none;, moet er een alternatief zijn die de toetsenbordfocus visueel duidelijk aangeeft. Bijvoorbeeld door het definiëren van een border als een element focus krijgt.

Controleer of de breedte van de outline tenminste 2 CSS-pixels breed is. Inspecteer in de gegenereerde HTML-code van de webpagina de elementen die de toetsenbordfocus kunnen krijgen, bijvoorbeeld met een browser inspector.

  • Zorg dat het element wat je wilt inspecteren de focus heeft.
  • In de CSS-properties moet gedefinieerd staan dat de outline-width of border-width ten minste 2 pixels is.
  • Controleer of het kleurcontrast van de outline ten minste 3:1 is ten opzichte van de aangrenzende kleuren, dus de binnen- en buitenkant van de lijn.
  • Controleer dan of er een kleurcontrast is van ten minste 3:1 tussen dezelfde pixels in de gefocuste en niet-gefocuste staat.

Is er geen outline, maar verandert de kleur van het hele element?

  • Controleer dan of er een kleurcontrast is van ten minste 3:1 tussen dezelfde pixels in de gefocuste en niet-gefocuste staat. Bijvoorbeeld voor een button die van kleur verandert bij toetsenbordfocus.
  • Controleer of de tekst in dit element aan de richtlijnen voor contrast voldoet in gefocuste en niet-gefocuste staat.

Mooie tools om het kleurcontrast te testen en zo nodig een alternatief te kiezen zijn:

Additionele testen:

  • de skip link wordt zichtbaar als deze toetsenbord krijgt.
  • de outline (of het alternatief) is goed zichtbaar bij componenten met verschillende achtergrondkleuren, zoals bij een Page-header of footer.
  • de outline (of het alternatief) is goed zichtbaar in dark- en 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.