IJkpunt 2.1 - Webrichtlijnen 1

Referentie: De WCAG ijkpunten zijn identiek aan de Waarmerk drempelvrij ijkpunten en de Webrichtlijnen.

Beschrijving

Een op de twaalf mannen is kleurenblind. Ze hebben vooral last met de kleuren rood en groen. Als kleur het enige middel is voor het overbrengen van informatie, het aangeven van antwoorden of het onderscheiden van visuele elementen of functies, zorg er dan voor dat de informatie ook zonder kleur beschikbaar is, bijvoorbeeld via context of markup (zie ook link naar artikel in rechter kolom).

Relevante Webrichtlijnen: R-pd.8.8, R-pd-10.1 R-pd.22.9.

Voordelen:

• Mensen die een kleurenstoornis hebben, hebben toegang tot alle informatie door middel van de opmaak of de context waarin die informatie wordt gebruikt;
• Mensen die gebruik maken van zwart-wit beeldschermen hebben toegang tot alle informatie;
• Mensen die afhankelijk zijn van een tekstbrowser hebben toegang tot alle informatie.

Criteria voor toetsing

• Alle informatie die met kleur wordt overgebracht is ook beschikbaar zonder de waarneming van kleur;
• Kleurcodering is niet gebruikt als de enige manier om informatie over te brengen, een respons aan te geven of een visueel element te onderscheiden;
• Links zijn eenvoudig te onderscheiden van andere tekst*;
• Kleur wordt op een consistente manier gebruikt telkens wanneer het een betekenis aangeeft.*

*: Dit is uitsluitend een succescriterium binnen de Webrichtlijnen. Het overschrijdt conformiteit met WCAG 1.0; zie hieronder voor meer informatie.

Voorbeeld

Hieronder zie je een voorbeeld van functioneel kleurgebruik, waarbij groen gebruikt wordt voor 'doorgaan' en rood voor 'stoppen'. Wanneer alleen kleur wordt gebruikt, zal de informatie niet toegankelijk zijn voor bepaalde groepen mensen. Let op dat een kleine groep mensen (achromaten) rood waarneemt als zwart. Gebruik daarom op rood liever een witte letter met goed contrast.

Uitgaande van het feit dat de meeste mensen rood boven verwachten en groen onder, is het gebruik zonder tekst extra verwarrend en zelfs niet zonder risico. Gemiddeld heeft één op de acht mannen problemen met de rood-groen waarneming tegen één op de driehonderd vrouwen. Zorg dus voor meer onderscheid dan alleen verschillend kleurgebruik.

Uitvoer naar hulpapparatuur

De onderstaande afbeelding laat een voorbeeld zien van een webpagina met een simpel reserveringssysteem. Onderaan is ook de tekstversie van de pagina te zien in het programma Webformator dat door veel blinden wordt gebruikt. Door het gebruik van kleur voor zowel de tekst als de knoppen is de pagina voor veel mensen onbruikbaar. Daaronder mensen die kleurenblind zijn en mensen die hulpapparatuur of een tekstbrowser gebruiken.

Oplossingen

Foutdetectie

Bij het invullen van een formulier wordt vaak met een kleur aangegeven welke velden nog niet goed zijn ingevuld. Dat mag niet alleen met kleur maar moet ook op een andere manier blijken. Een oplossing is het gebruik van een extra symbool zoals een asterisk (*) of een getal. Bijvoorbeeld: 'Opties aangegeven met * kunnen niet worden geselecteerd' of zijn verkeerd ingevuld.

Knoppen die kleur gebruiken

Druk op de groene knop om verder te gaan... Zet op de groene knop dan ook het woord 'doorgaan'. De eenvoudigste oplossing namelijk meestal het toevoegen van tekst op de knop. Als de knop een afbeelding is, vergeet dan niet om ook een alt-attribuut toe te voegen volgens ijkpunt 1.1. Let op: alleen een alt-attribuut is niet genoeg voor bovenstaande voorbeeld.

Kleur van hyperlinks

In sommige gevallen wordt door webdesigners de streep onder hyperlinks verwijderd. De links zijn dan bijvoorbeeld zichtbaar door een andere kleur. Bij een menu is het niet gebruiken van onderstreping meestal niet een probleem, maar in de tekst kan het moeilijk zijn om links te vinden. De webrichtlijnen hanteren twee regels ten aanzien van links. De kern is vooral dat het consistent moet zijn:

• Links moeten duidelijk te onderscheiden zijn van andere tekst.(R-pd.8.8). Ondestrepen is dus niet verplicht maar wordt wel aangeraden.
• Er dient een duidelijk verschil te zijn tussen bezochte en onbezochte links.

Hyperlinks binnen een menu geven soms via kleur aan op welke pagina de gebruiker zich op dit moment bevindt ten opzichte van het menu. Dit is alleen toegestaan als de informatie ook uit andere bronnen op de pagina duidelijk is, zoals bijvoorbeeld de breadcrumb of de titel van de pagina. De hyperlink waar de gebruiker zich bevindt in normale tekst omzetten of de informatie opnemen in het title attribuut zijn ook goede oplossingen.

Hoewel consistentie een vanzelfsprekendheid lijkt, is het voor de W3C richtlijnen prioriteit 2: 'Gebruik navigatiemechanismen op een consistente wijze' (WCAG 13.4). Voor de Webrichtlijnen is het wel verplicht. Kijk voor meer informatie over kleurcontrast naar ons artikel over Effectief omgaan met kleuren

Definities

Kleurcodering

• Het gebruik van een of meer kleuren om informatie over te brengen, een respons aan te geven of een visueel element of een visuele functie te onderscheiden.

Verwijzingen

• R-pd.1.2 Bouw websites volgens het principe van gelaagd bouwen.
• R-pd.8.8 Links moeten duidelijk te onderscheiden zijn van andere tekst.
• R-pd.10.1 Zorg ervoor dat communicatieve elementen hun betekenis niet uitsluitend door kleur overbrengen.
• R-pd.10.2 Wees consistent met kleurgebruik bij het geven van betekenis.
• R-pd.2.9 Bouw een website volgens de Web Content Accessibility Guidelines (WCAG 1.0) van het W3C.