Informatie is niet alleen te onderscheiden op basis van kleur. Wanneer dit wel zo is, kan het zijn dat kleurenblinde bezoekers informatie missen. Veelgemaakte 1.4.1 fouten zijn bijvoorbeeld hyperlinks, formulieren en legenda’s van grafieken.
Veel webdesigners vinden dat onderstreepte hyperlinks ouderwets zijn. Daarom kiezen ze ervoor om hyperlinks een andere kleur te geven dan lopende tekst. Vaak is de lopende tekst zwart en de hyperlink een andere kleur.
In afbeelding 1 zien we een voorbeeld van een hyperlink die rood is, terwijl de lopende tekst zwart is.
Voor de meeste bezoekers is het duidelijk dat deze hyperlink anders is dan de lopende tekst, maar voor kleurenblinde bezoekers geldt dit niet. Zij zien het onderscheid tussen de klikbare hyperlink en normale lopende tekst mogelijk niet.
In afbeelding 2 zien we dezelfde hyperlink in de zwart-wit weergave. Nu is alle tekst grijs/zwart, waardoor het onderscheid niet of niet makkelijk te maken is.
Hierdoor is het dus belangrijk dat de hyperlink niet alleen op basis van kleur te onderscheiden is.
Hoe moet het dan wel? In afbeelding 3 is een hyperlink te zien die onderstreept is. Zo zien alle bezoekers direct dat dit onderdeel klikbaar is. De tekstkleur van de hyperlink is in dit geval zwart, maar deze mag ook gekleurd zijn.
Het belangrijkste voor succescriterium 1.4.1 is dat informatie niet alleen op basis van kleur beschikbaar is. Dit betekent niet dat ze per se onderstreept moeten zijn.
Hyperlinks mogen ook dikgedrukt zijn of voorzien worden van een icoon. Zolang de informatie niet alleen op basis van kleur te onderscheiden is, is het voor 1.4.1 voldoende.
Een andere veelgemaakte 1.4.1 fout heeft te maken met grafieken en tabellen. In afbeelding 4 zien we een overzicht van de statussen die verklaringen van overheidswebsites en -apps hebben in het Register DigiToegankelijk. Deze variëren van A t/m E en zijn op basis van de legenda te onderscheiden.
Maar, deze informatie is weer alleen beschikbaar op basis van kleur. Bezoekers zonder kleurenblindheid zien dat oranje bij een E-status hoort en rood bij een B-status, maar in de zwart-wit weergave is dit onderscheid niet (zo makkelijk) te maken.
Hoe moet het dan wel? In afbeelding 5 zien we hoe DigiToegankelijk dit probleem heeft opgelost. De legenda is hier niet alleen af te lezen op basis van kleur, maar ook van een patroon voorzien. Zo is deze ook in zwart-wit door alle bezoekers te begrijpen.
Daarnaast biedt de website niet alleen een grafiek-weergave van de informatie aan, maar ook een tabel-weergave. Deze tabellen zijn vaak beter te begrijpen door schermlezers.
Ook bij webformulieren gaat dit vaak fout. Als er een fout in een invoerveld zit, veranderd vaak de randkleur van het veld naar rood.
Wanneer dit invoerveld geen tekstuele foutmelding krijgt, is de informatie dus alleen beschikbaar voor bezoekers die kleuren kunnen onderscheiden.
Een voorbeeld hiervan is te zien in afbeelding 6.
Zorg voor een tekstuele foutmelding, zodat de foutmelding niet alleen op basis van kleur te onderscheiden is. Zo zien alle bezoekers welk invoerveld nog invoer vereist. Een voorbeeld hiervan zie je in afbeelding 7.
Let bij foutmeldingen op de programmatische opmaak van foutmeldingen. Bezoek succescriterium 4.1.3 voor meer informatie over aria-labels en foutmeldingen.
Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden.
Wij zijn een full-service partner voor digitale toegankelijkheid: bewustwording, advies en borging. Samen maken we digitale dienstverlening toegankelijk en inclusief.
