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

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

SC 1.4.11 - Wat betekent “Contrast voor niet-tekstuele onderdelen”

Toegankelijkheid gaat niet alleen over leesbare tekst. Ook visuele elementen zoals knoppen, iconen, formuliervelden en focusindicatoren moeten duidelijk zichtbaar zijn. Als deze nauwelijks afsteken tegen de achtergrond, kunnen gebruikers belangrijke functies of informatie missen.

Julia Tol 2 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

Accessible name: wat moet je weten

Bij Proper Access beginnen we al onze trainingen voor webdevelopers met iets dat simpel lijkt, maar reuze belangrijk is. Als ik je als ontwikkelaar een tip mag geven: begrijp hoe de toegankelijke naam (accessible name) van een interactief element werkt. Het is de basis van digitale toegankelijkheid – en het punt waar het vaakst iets misgaat.

Julia Tol 3 min leestijd