Toepassen van WCAG in design

Enkele manieren om mensen met beperkingen tegemoet te komen in de digitale wereld, zijn al kort aan bod gekomen in dit magazine. Maar waar hebben we het nou concreet over?

Bij DutchGiraffe speelt digitale toegankelijkheid een belangrijke rol.

We zijn elke dag bezig met de toegankelijkheid van onze online publicaties. We bespreken dus graag wat tips en tricks waarmee ook jij snel aan de slag kan om je online communicatie te verbeteren.

Vormgeving

Je wil natuurlijk dat je website er mooi uitziet, maar het is hierbij ook belangrijk rekening te houden met mensen die het minder goed kunnen zien. Hoe doe je dit?

Vormgeving

Je wil natuurlijk dat je website er mooi uitziet, maar het is hierbij ook belangrijk rekening te houden met mensen die het minder goed kunnen zien. Hoe doe je dit?

Wees niet afhankelijk van vorm of kleur

Niet alle bezoekers kunnen de vormgeving van een webpagina zien. Sommige bezoekers zijn kleurenblind of slechtziend, andere bezoekers laten de tekst voorlezen of omzetten in braille. Het is daarom belangrijk om alle informatie die je met kleur of vorm overbrengt ook met tekst over te brengen. Een rode knop voor ‘stoppen’ en een groene knop voor ‘doorgaan’ kan dus alleen als op die knoppen ook een tekst staat.

Contrast

Zorg dat het contrast tussen voor- en achtergrondkleuren voldoende is. Bezoekers die kleurenblind of slechtziend zijn, kunnen kleuren vaak niet goed waarnemen. Ook bezoekers die een webpagina in grijstinten afdrukken of die in de volle zon een website proberen te gebruiken hebben baat bij een goed kleurcontrast.

Tekst

Bij het schrijven van goede webteksten zijn verschillende zaken van belang. De structuur is een van de voornaamste componenten. Met een duidelijk gestructureerde tekst breng je je boodschap beter over op je gebruikers. Waar kijk je naar bij het schrijven van je tekst?

Tekst

Bij het schrijven van goede webteksten zijn verschillende zaken van belang. De structuur is een van de voornaamste componenten. Met een duidelijk gestructureerde tekst breng je je boodschap beter over op je gebruikers. Waar kijk je naar bij het schrijven van je tekst?

De structuur van een tekst aangeven

De meeste teksten zijn niet ‘plat’: ze hebben een structuur. Ze bestaan uit koppen en paragrafen, opsommingen of citaten. Vaak is de structuur van een tekst goed zichtbaar in de vormgeving.

Kopjes zijn vetgedrukt, net als belangrijke woorden.
Paragrafen zijn gescheiden door witregels.
Opsommingen en genummerde lijsten herken je ook direct: elk item staat op een nieuwe regel, voorafgegaan door een opsommingsteken of cijfer.

Al deze informatie over de structuur van een tekst kun je vastleggen in de HTML-code van die tekst.

Dat gaat automatisch als je de juiste knoppen van de editor in het CMS gebruikt. Door de structuur op die manier aan te geven maak je de tekst en de structuur daarvan toegankelijk voor alle bezoekers.

Duidelijke koppen en titels

De toegankelijkheid van teksten zit hem niet alleen in de structuur. Een toegankelijke tekst is ook begrijpelijk. Die begrijpelijkheid kun je vergroten door duidelijke titels en koppen te gebruiken. Daarom moet de titel van een pagina duidelijk beschrijven waar de pagina over gaat. En (tussen-)koppen moeten het onderwerp of het doel van de paragrafen die erbij horen beschrijven.

Afbeeldingen

Een plaatje zegt vaak meer dan duizend woorden. Toch hebben afbeeldingen ook hun beperkingen. Een afbeelding is namelijk een momentopname. Dit kan op verschillende manieren geïnterpreteerd worden. Door een tekst of onderschrift aan de afbeelding toe te voegen verduidelijk je dit, en vergroot je de vindbaarheid in zoekresultaten.

Afbeeldingen

Een plaatje zegt vaak meer dan duizend woorden. Toch hebben afbeeldingen ook hun beperkingen. Een afbeelding is namelijk een momentopname. Dit kan op verschillende manieren geïnterpreteerd worden. Door een tekst of onderschrift aan de afbeelding toe te voegen verduidelijk je dit, en vergroot je de vindbaarheid in zoekresultaten.

De juiste techniek

Door op de juiste wijze een tekstueel alternatief toe te voegen aan afbeeldingen zorg je dat de hulptechnologie van bezoekers de tekst kan vinden en er goed mee om kan gaan. Meestal is het toevoegen van een tekstuele beschrijving mogelijk in het CMS. Sommige soorten afbeeldingen vragen om een andere aanpak, zoals diagrammen en CAPTCHA’s. De basis blijft: tekstueel beschrijven wat je ziet.

De juiste beschrijving

Een tekstueel alternatief werkt alleen als de beschrijving adequaat is. In veel gevallen gaat het om ‘vertellen wat je ziet’. Soms gaat het juist om ‘vertellen wat dit doet’, bijvoorbeeld bij een button in een formulier. En als een afbeelding geen informatie toevoegt, is het beter ook geen alt-tekst te geven. Denk dus goed na over de tekstuele beschrijving. Iemand die alleen de alt-teksten ziet zou de informatie nog steeds moeten kunnen begrijpen en de website nog steeds moeten kunnen gebruiken.

Navigatie

Een goede navigatiestructuur is belangrijk voor de gebruikservaring van je website. Je wil zoveel mogelijk bezoekers een bepaald doel laten voltooien. Een duidelijke navigatie helpt hierbij en zorgt ervoor dat gebruikers snel kunnen vinden waar ze naar op zoek zijn, en een goed beeld van je website krijgen. Hoe doe je dit?

Navigatie

Duidelijke verwijzingen

Niemand klikt graag op een link waarvan de bestemming niet duidelijk is. Schrijf daarom linkteksten waaruit duidelijk blijkt waar de link heen zal leiden, ook als je de omliggende tekst niet leest. Sommige bezoekers gebruiken hulptechnologie die de links los van de lopende tekst op kan lezen. Een linktekst als ‘klik hier’ is dan niet duidelijk. Beter zou bijvoorbeeld zijn: ‘lees meer over toegankelijkheid’. Hiermee help je niet alleen bezoekers, maar ook zoekmachines. Die gebruiken de linktekst om de pagina waarnaar verwezen wordt beter te begrijpen.

Meerdere ingangen

Elke pagina in een website moet op meer dan één manier te vinden zijn, want niet elke bezoeker navigeert op dezelfde wijze. Zo wil de ene bezoeker het navigatiemenu gebruiken en typt de andere bezoeker liever direct een zoekterm in het zoekveld.

Dus, de vormgeving van een website kan de online ervaring van mensen met beperkingen sterk beïnvloeden. Door op een doordachte manier design toe te passen en content te creëren, kunnen we de belasting verminderen en het internet toegankelijker maken.