Webdeveloper

Native HTML-componenten en kleurcontrast volgens WCAG 2.1

Moet je het kleurcontrast van native HTML-componenten zoals checkboxes en selects controleren? Uitleg over de WCAG 1.4.11 uitzondering.

Julia Tol 1 min leestijd
Inhoudsopgave

Native HTML-componenten en kleurcontrast volgens WCAG 2.1

Informatieve en interactieve interface-elementen zoals knoppen, selectievakken en schuifregelaars moeten voldoende contrast hebben zodat ze zichtbaar zijn voor alle bezoekers. In de praktijk roept dit vaak vragen op bij audits en code-reviews: moet ik het kleurcontrast van elk zichtbaar UI-element controleren en verbeteren?

Het korte antwoord is: nee, niet altijd.

De contrasteis geldt niet voor grafische elementen die volledig door de user agent worden geleverd, mits ze niet zijn aangepast door de auteur.

See the Pen 1.4.11 exceptions by Julia Tol (@Julia-Tol-wcag) on CodePen.

Voorbeelden waarbij contrast verplicht is:

  • Een checkbox gebouwd met <div> en CSS
  • Een <select> waarbij de pijl is vervangen door een SVG
  • Een slider waarvan de thumb en track custom zijn gestyled
  • Eigen focus-indicator
1 4 11

Related Posts

Hoe toegankelijk zijn de websites van de grootste opticiens?

Een mini-scan met verrassende inzichten De European Accessibility Act (EAA) is van kracht. Voor middel- en grote bedrijven die producten en diensten online aanbieden, betekent dit dat hun websites en apps moeten voldoen aan de toegankelijkheidsrichtlijnen (WCAG). Maar hoe staat het er nu eigenlijk voor met de digitale toegankelijkheid in Nederland?

Julia Tol 4 min leestijd

Submenu dichtklappen

Toetsenbordfocus moet logisch zijn Als bezoekers met het toetsenbord door een website navigeren, moeten interactieve elementen in een logische volgorde focus krijgen. Logisch betekent: aansluitend op de visuele volgorde. Wijkt de focusvolgorde daar sterk van af, dan wordt de website moeilijk te gebruiken voor mensen die geen muis kunnen of willen gebruiken.

Julia Tol 3 min leestijd

Tools om contrast te checken

De TPGi Color Contrast Checker is een gratis tool om te controleren of de kleuren op je website genoeg contrast hebben volgens de WCAG-richtlijnen.

Julia Tol 2 min leestijd