WCAG 2.1 en digitoegankelijkheid: 7 toegankelijke tips

Wat is digitoegankelijkheid?

Een site bezoeken of app gebruiken klinkt misschien vanzelfsprekend. Niet als je een beperking hebt. In Nederland hebben meer dan 2,5 miljoen mensen een lichamelijke, zintuiglijke, verstandelijke of psychische beperking, of een chronische ziekte, die het gebruik van digitale toepassingen moeilijk kunnen maken.

De Nederlandse en Europese overheden leggen de laatste jaren veel nadruk op digitale toegankelijkheid. Digitoegankelijkheid (ook wel webtoegankelijkheid genoemd) betekent dat websites door iedereen te gebruiken zijn. Het doel: een toegankelijke (digitale) samenleving realiseren. Websites en apps voor toegankelijk maken, ongeacht je beperking. 

WCAG: richtlijnen voor webcontent

Hoe maken wij websites, webshops en portalen toegankelijk? Richtlijnen voor webcontent zijn vastgelegd in de Web Content Accessibility Guidelines, die we voor het gemak afkorten als WCAG. Hierin staan eisen voor het ontwerpen, bouwen en onderhouden van websites en apps. In 2018 verscheen de recentste versie van de richtlijnen: WCAG 2.1.

Eisen hebben te maken met gebruikservaring, gebruiksvriendelijkheid en begrijpelijkheid. Slechtzienden gebruiken vaak een screenreader als ze een webpagina bezoeken. Dit is een softwareprogramma dat de tekst van het scherm voorleest. Slim om hier rekening mee te houden tijdens het bouwen van een site.

3 niveaus van WCAG

De mensen achter de WCAG doen veel internationaal onderzoek. De richtlijnen moeten nuttig zijn voor een zo breed mogelijke groep mensen, met verschillende beperkingen. Er bestaan 3 eisenniveaus: A, AA en AAA. Zit je op niveau A, dan voldoe je aan de basiseisen voor toegankelijkheid. Overheidsorganisaties zijn bijvoorbeeld verplicht om te voldoen aan de eisen op zowel niveau A als AA.

Bij elkaar zijn er 50 richtlijnen, die ook wel succescriteria worden genoemd. Bij elk succescriterium beschrijven de WCAG hoe je er het beste aan kunt voldoen. Hiervan geven we straks een paar voorbeelden. Laten we eerst nog even inzoomen op de principes van de WCAG.

4 principes van WCAG

De richtlijnen voor digitoegankelijkheid van de WCAG kunnen we opdelen in 4 principes: waarneembaar, bedienbaar, begrijpelijk en robuust.

1. Waarneembaar: alle informatie op een website of app moet voor iedereen waarneembaar zijn. Zo moeten afbeeldingen een alternatieve tekst krijgen die een screenreader kan voorlezen.
2. Bedienbaar: alle componenten op een website of app moeten door iedereen te bedienen zijn. Navigatie moet bijvoorbeeld niet alleen met muis, maar ook met toetsenbord te gebruiken zijn.
3. Begrijpelijk: alle informatie op een website of app moet te begrijpen zijn door mensen en software (zoals een screenreader).
4. Robuust: een website of app moet betrouwbaar geïnterpreteerd kunnen worden door veel verschillende apparaten en hulptechnologieën. Denk aan het gebruik van unieke ID’s in je opmaaktaal.

WCAG in de praktijk: Stichting PVP

Stichting PVP realiseert en handhaaft de rechten van cliënten in de GGZ. Doelgroepen variëren van kinderen tot ouderen en van vrijwillige tot gedwongen opname. Om te voldoen aan de regels binnen de sector (juridisch/zorg), ontwikkelde VrijdagOnline een nieuwe website aan de hand van de WCAG-richtlijnen.

Hoofddoel van de site is cliënten informeren over de mogelijkheden van (juridische) bijstand. Ons doel was om ze makkelijk te dirigeren naar de juiste informatie. Zoeken, vinden, bellen, mailen en chatten kregen daarom een centrale plek op de website. We werkten met grote, opvallende contentblokken, die beheerders zelf kunnen opmaken, vullen en plaatsen.

Een uitlegvideo maakt binnen een minuut duidelijk wat de PVP voor je kan doen als cliënt. In de doe-het-zelfsectie van de website vinden bezoekers voorbeeldbrieven, filmpjes en verdere uitleg over de stichting.

Bekijk de case

7 tips voor digitoegankelijkheid

1. Toegankelijk voor toetsenbord: veel mensen zijn muis en toetsenbord gewend, maar slechtziende personen gebruiken vaak alleen hun toetsenbord om te navigeren op een website. Logisch dus, om pagina’s in te richten voor deze doelgroep. Het moet bijvoorbeeld mogelijk zijn om met de Tab-toets naar verschillende interactieve elementen te navigeren.
2. Beschrijvende links: altijd verstandig om te doen, maar voor toegankelijke websites nóg toepasselijker. Geef links een duidelijke beschrijving. Een bezoeker die een schermlezer gebruikt, vindt “Klik hier” of “Lees meer” misschien verwarrend. Verwijst een link bijvoorbeeld naar de contactpagina? Geef hem dan de beschrijving: “Contact opnemen”.
3. Geef afbeeldingen alternatieve tekst: zogenaamde alt text is niet alleen handig om zoekmachines iets te vertellen over je afbeeldingen. Deze alternatieve tekst wordt hardop voorgelezen door een screenreader. Zo weet de gebruiker wat het plaatje voor moet stellen. Geef afbeeldingen dus een heldere beschrijvende tekst en je maakt je website een stukje toegankelijker.
4. Video’s met ondertiteling: video’s zijn onmisbaar op een toegankelijke website. In een kort filmpje kun je veel informatie overbrengen in begrijpelijke taal. Zelfs voor mensen die moeite hebben met zien, kan alleen de audio al veel duidelijk maken. Wel even zorgen dat je video’s altijd ondertiteld!
5. Pas contrast toe: slechtziende personen hebben vaak moeite met kleuren onderscheiden. Licht en donker zijn het makkelijkst uit elkaar te houden. Zorg op je website daarom voor genoeg contrast. De belangrijkste elementen moeten er uitspringen. En met zwarte tekst op een witte achtergrond zit je altijd goed.
6. Gebruik grote knoppen: om dezelfde reden als hierboven werk je met grote knoppen. Call-to-actions staan er al om bekend dat ze moeten opvallen. Maar voor een doelgroep waarbij toegankelijkheid extra van belang is, zul je hier ook extra aandacht aan moeten besteden.
7. Schrijf toegankelijk: een valkuil waar we allemaal weleens intrappen, is vergeten voor wie je schrijft. Onthoud dat een bezoeker misschien helemaal niet bekend is met jouw bedrijf – laat staan je dienst of product. Schrijf dus in een taal die past bij je doelgroep. Niet te ingewikkeld of langdradig en geen jargon. Gebruik een groot genoeg lettertype, korte alinea’s, voldoende witruimte en let op je koppen en tussenkoppen.