3.4.1 Inhoud is begrijpelijk voor wie geen kleuren kan onderscheiden

Geef instructies en andere essentiële informatie niet enkel op basis van kleur, vorm, locatie of geluid.

Kleuren en vormen worden meestal decoratief gebruikt, maar soms vervullen ze ook een communicatieve functie of zijn ze essentieel om de inhoud van een webpagina te begrijpen. Dit ijkpunt gaat over kleuren, vormen, locaties of geluiden die informatie overbrengen. Denk hierbij aan foutmeldingen, bevestigingen of beschikbaarheid.

Een goede strategie is om te zorgen dat de informatie ook in tekst aanwezig is of dat u naar een tekstueel element verwijst.

Opmerking: hoewel decoratief kleurgebruik geen invloed heeft op de begrijpbaarheid van de inhoud, kan het in sommige gevallen wel de leesbaarheid verminderen.

Voorbeeld kleur

Hieronder ziet u een fragment uit de (vroegere) tabel met vertrektijden op de website van de Brusselse Luchthaven. Opgestegen vliegtuigen zijn aangeduid met een groen blokje. Vertraagde vluchten herkent u aan de rode blokjes.

Schermafbeelding vluchtinformatie (ontoegankelijk)

Eén op acht mannen is kleurenblind en rood-groenkleurenblindheid komt het vaakst voor. Wie geen kleuren kan onderscheiden (of blind is), heeft niet voldoende aan de gekleurde blokjes om de vluchtinformatie te begrijpen. De webmaster heeft de tabel als volgt aangepast:

Schermafbeelding vluchtinformatie (toegankelijk)

Wat veranderd is:

  • De rode en groene blokjes zijn balkjes geworden met het opschrift ‘Opgestegen’ of ‘Vertraagd’.
  • Dankzij alt-teksten met dezelfde informatie kunnen ook blinden de status aflezen.

Voorbeeld tekstgrootte en/of kleur

In een tagcloud wordt typisch de frequentie van woorden of tags gevisualiseerd met behulp van tekstgrootte en/of kleur.

Niet goed

Screenshot tagcloud zonder aanvullende informatie

Mensen die een website in braille of spraak bekijken zien deze tekstkenmerken niet. Zij kunnen dus geen onderscheid maken tussen de (grote) veel voorkomende woorden en de (kleine) weinig voorkomende woorden. Daarom moet deze informatie ook op een andere wijze beschikbaar zijn. Bijvoorbeeld door het aantal keer dat het woord voorkomt te vermelden bij het woord. Eventueel kunt u deze aanvullende informatie met CSS verbergen. Een andere goede oplossing is om de mogelijkheid te geven de tags te sorteren op frequentie. Lees ook de blogpost Accessible tag cloud.

Goed

Een voorbeeld tagcloud met zichtbare frequentie.

screenshot tagcloud met aanvullende informatie

Voorbeeld locatie, vorm, geluid

Niet goed

  • Rechts op deze pagina, staat zowel de samenvatting als de volledige presentatie.
  • Klik op de driehoek voor meer voertuigen
    Schermafbeelding klink op de driehoek voor meer voertuigen'
  • U kunt uw bericht inspreken na de piep.

Goed

  • Rechts op deze pagina, onder het kopje 'Documenten', staat zowel de samenvatting als de volledige presentatie.
  • Meer Voertuigen
  • U kunt uw bericht inspreken na de piep wanneer het woord "Opname" oplicht.

Andere voorbeelden

  • Om aan te geven dat een verzonden webformulier fouten bevat, volstaat het niet om velden rood te markeren. Geef ook tekstueel aan welke velden niet of foutief ingevuld werden.
  • In afvalkalenders op gemeentelijke websites wordt het onderscheid tussen restafval, PMD, papier en glas vaak met kleuren aangeduid. Ook hier volstaat het niet om een kleurlegende te gebruiken. Het gebruik van afkortingen of pictogrammen (met bijbehorende alt-attributen) kan dit toegankelijkheidsprobleem oplossen.
  • Een taartdiagram met een kleurenlegende kunt u toegankelijker maken door te werken met verschillende symbolen of arceringen.

Kleurcodes mag u uiteraard blijven gebruiken omdat ze voor de meeste bezoekers het duidelijkst zijn. Dit ijkpunt vraagt wel om daarnaast ook een onderscheid te voorzien dat niet enkel op kleurverschillen is gebaseerd.

Zelf testen

  1. Is de website begrijpelijk zonder kleur?
    U kunt uw pagina op verschillende manieren zonder kleur bekijken.

    Mac OS: zet de instellingen van het beeldscherm op grijswaarden via System Preferences > Accessibility > Display > Use Grayscale

    Online: Bekijk uw pagina in grijstinten; geef uw webadres in in Graybit. Is de site nog begrijpelijk?

    Firefox : Bekijk de website in Text-only modes van Wave Toolbar. Is de site nog begrijpelijk?

    Internet Explorer: Bekijk de website in grijstinten met de Web Accessibility Toolbar; kies in het menu "colour" voor "grayscale". Is de site nog begrijpelijk?

    • Ja; test het volgende punt.
    • Nee; pas uw website aan.
  2. Verwijzen instructies naar enkel zintuiglijke eigenschappen bijvoorbeeld u vind … /klik de … boven/onder , links/rechts, rode/groene/etc, tekst/veld/knop/etc of naar een geluid?

    • Ja; pas uw website aan, bijvoorbeeld door (ook) naar titels/opschriften/ tekst te verwijzen.
    • Nee, dan is aan dit ijkpunt voldaan.
  3. Het is aan te raden om ook te kijken of de tekst duidelijk leesbaar is.
    Colour Contrast Analyser; Selecteer de kleur van de tekst en selecteer de kleur van de achtergrond. Kijk naar Results - Luminosity. Is het kleurcontrast groter dan 4,5:1?

    • Ja; dan is aan dit punt voldaan.
    • Nee; pas uw website aan.