R-pd.10.1
Zorg ervoor dat communicatieve elementen hun betekenis niet uitsluitend door kleur overbrengen.
De betekenis van kleur op webpagina’s
Kleur wordt vaak gebruikt als zowel decoratief als communicatief vormgevingselement op een webpagina. Het is belangrijk dat communicatieve elementen hun betekenis niet uitsluitend door kleur overbrengen.
Uitleg van deze richtlijn
Decoratieve vormgevingselementen fungeren letterlijk alleen als decor. Het ontbreken van dergelijke elementen heeft geen enkele consequentie voor het begrip van de bezoeker. Denk hierbij bijvoorbeeld aan achtergrondillustraties.
Met communicatieve elementen worden elementen bedoeld, die betekenis kunnen hebben voor de bezoeker. Via deze elementen wordt informatie overgedragen aan de bezoeker. Tekst (in HTML of afbeeldingen), links, navigatie, symbolen/iconen en (formulier)knoppen zijn hier voorbeelden van.
Decoratieve elementen worden hier niet behandeld, omdat het kleurgebruik bij deze elementen vrijwel geen invloed heeft op duurzame toegankelijkheid van websites. Ten aanzien van het kleurgebruik bij communicatieve elementen bestaan er richtlijnen binnen de WCAG (Web Content Accessibility Guidelines).
“Ensure that all information conveyed with color is also available without color, for example from context or markup.”
Voorbeeld: waarom is dit belangrijk?
Een voorbeeld: een bezoeker heeft een formulier ingevuld en vergeet daarbij een verplicht veld in te vullen. De bezoeker krijgt het formulier weer te zien, met de melding dat hij of zij het vergeten veld alsnog moet invullen. Alle velden zijn voorzien van een groen kader, maar het vergeten veld is nu voorzien van een rood kader. Als de bezoeker kleurenblind is, hebben de eigenaar van de website en de bezoeker een probleem. De bezoeker ziet het verschil niet waardoor de eigenaar de gegevens niet krijgt.
In dit voorbeeld is kleur als enige middel ingezet om betekenis aan te geven. Kleur mag op deze manier worden gebruikt, zolang het wordt aangevuld met kleuronafhankelijke middelen. In het voorbeeld had de ontwikkelaar een dikker rood kader om het vergeten veld kunnen plaatsen. Deze oplossing heeft echter geen betekenis voor blinde bezoekers die een spraakbrowser gebruiken. Ook gebruikers van tekstbrowsers en oude browsers die geen CSS (Cascading Style Sheets) ondersteunen, hebben er niets aan. Het gebruik van markup in de HTML van de pagina (bijvoorbeeld <strong></strong> om het label element) biedt hiervoor een oplossing. Een oplossing van het voorbeeldprobleem ziet er dus als volgt uit.
| Kenmerk bezoeker | Voorziening |
|---|---|
| Normaal gezichtsvermogen | Rood kader |
| Kleurenblindheid | Verdikking van kader |
| Spraak-, tekst- of oude webbrowser | HTML markup |
| Voor alle bezoekers bruikbaar: | Toelichtende tekst |
Waarneembare voorzieningen
Bij het ontwikkelen van webpagina’s is van belang dat alle voorzieningen waarneembaar zijn op de webpagina zelf en niet alleen in de HTML-code van de pagina. Zo wordt strong markup meestal zichtbaar gemaakt als vetgedrukte tekst, maar het title attribuut bijvoorbeeld, wordt alleen getoond wanneer de muiswijzer over het element wordt bewogen.
Links en referenties
- Aan de slag: Kleurgebruik en kleurenblindheid
Gerelateerde richtlijnen
- R-pd.2.9: Bouw een website volgens de Web Content Accessibility Guidelines (WCAG 1.0) van het W3C.
- R-pd.10.2: Wees consistent met kleurgebruik bij het geven van betekenis.
- R-pd.10.3: Zorg voor voldoende helderheidscontrast tussen tekst- en achtergrondkleur.
Bijbehorende ijkpunten normdocument
- IJkpunt 2.1: Zorg ervoor dat alle informatie die met behulp van kleur wordt overgebracht ook beschikbaar is zonder kleur, bijvoorbeeld uit de context of uit de opmaak.
