Gebruik niet alleen kleur, vorm of locatie om informatie over te dragen

Kleur, vorm en locatie zijn voorbeelden van zintuiglijke informatie. Dat is informatie die wordt overgebracht via een bepaald zintuig: je moet het bijvoorbeeld zien of horen om te weten wat wordt bedoeld. Zorg dat zintuiglijke informatie altijd ook op een andere beschikbaar is.

Hoe pas ik dit toe?

Wees je ervan bewust dat niet alle bezoekers een website op dezelfde wijze waarnemen. Bezoekers zonder visuele beperking zien de pagina als geheel. Ze zien de locatie, vorm en grootte van teksten, vakken en knoppen. Ze zien verschillende kleuren en weten meestal wat wordt bedoeld met bijvoorbeeld een rode knop of een groen bolletje. Als in de tekst verwezen wordt naar de ‘knop rechtsonder’ dan kunnen zij deze makkelijk vinden.

Bezoekers die kleurenblind, slechtziend of blind zijn hebben geen beschikking over (al) deze visuele aanwijzingen. Om ervoor te zorgen dat iedereen een website kan begrijpen en gebruiken moet je dus niet alleen op visuele aanwijzingen vertrouwen. Natuurlijk kun je zintuiglijke informatie blijven gebruiken, zolang de betekenis ook op een andere wijze wordt overgedragen, én je bij een instructie niet alleen verwijst naar de zintuiglijke eigenschap.

Voorbeelden

Kleurgebruik

Als je kleur gebruikt om informatie over te dragen (bijvoorbeeld om aan te geven dat een product op voorraad is), vul dit dan aan met een andere aanwijzing. Zo zou je in een webshop producten die op voorraad zijn zowel met een groen bolletje als met een tekst tussen haakjes (op voorraad) kunnen aanduiden.

Verwijzen naar een onderdeel op een pagina

Als je in een uitleg verwijst naar een onderdeel op de pagina, noem dan niet alleen de kleur, vorm of locatie. Zeg dus niet: ‘gebruik de groene knop om je gegevens te verzenden’ (kleur), ‘gebruik de ronde knop om je gegevens te verzenden’ (vorm), of, ‘gebruik de knop onderaan om je gegevens te verzenden’ (locatie), maar ‘gebruik de (groene, ronde) knop (onderaan) met tekst “klaar” om je gegevens te verzenden’. Door te verwijzen naar de tekst van de knop is het voor alle bezoekers helder welke knop je bedoelt. Om het eenvoudiger te maken de knop snel te vinden kun je nog steeds aanvullend ook de kleur, vorm of locatie noemen.

Pas ook op met verwijzingen als ‘het menu hiernaast’. Sommige bezoekers bekijken de pagina mogelijk met hulptechnologie in een andere vormgeving, die voor hen eenvoudiger is. Het menu staat dan misschien juist boven of onder de tekst. Ook in een mobiele weergave van een website staat het menu vaak op een andere plaats.

Termen als ‘hierboven’ en ‘hieronder’ kunnen in sommige gevallen wel gebruikt worden. In het Nederlands is het duidelijk dat ‘hierboven’ verwijst naar iets dat voorafgaat aan dat punt in de tekst, en ‘hieronder’ naar iets dat volgt. Als de inhoud in de code op de juiste volgorde staat en met een verwijzing als ‘hierboven’ niets anders kan worden bedoeld dan ‘eerder in deze tekst’, dan is het geen probleem om bijvoorbeeld te zeggen: ‘kies één van de links hieronder’, of ‘alle hierboven genoemde punten’.

Hoe draagt dit bij aan een betere website?

Een grote groep mensen kan niet (altijd) kleur, vorm of locatie van elementen op een website waarnemen. Blinden, slechtzienden en kleurenblinden vormen samen een groep van ruim 1 miljoen Nederlanders. Sommige oudere mensen kunnen kleuren ook niet goed meer zien. En iedereen die een scherm gebruikt dat een slecht contrast heeft, alleen in grijstinten kan printen of probeert in fel zonlicht op zijn scherm te kijken is ook gebaat bij informatie die niet afhankelijk is van kleur.

Bouwer of redacteur?

Al bij het ontwerp en de bouw van de website moet deze eis in gedachten worden gehouden: ontwerpers en bouwers moeten er niet van uitgaan dat alle bezoekers het ‘complete plaatje’ kunnen waarnemen. Voor iets dat alleen visueel of door middel van geluid wordt overgebracht moet dus altijd een alternatief zijn. De redacteur moet bij het schrijven van teksten opletten niet alleen te verwijzen naar zintuiglijke eigenschappen van onderdelen van een website.

Technische details

  • Hoort bij toegankelijkheidseis 1.3.3 en 1.4.1
  • Niveau A

Hoort bij