Ga naar de inhoud

WCAG richtlijnen voor accessibility en digitale toegankelijkheid uitgelegd

Het opmerkelijke aan de WCAG is dat deze zelf niet toegankelijk blijkt te zijn. Zelfs professionals ervaren moeilijkheden bij het lezen en begrijpen van deze webrichtlijnen. Samengevat zijn de webrichtlijnen voor digitale toegankelijkheid zelf niet toegankelijk.

Het gebruik van een WCAG 2.1-checklist is handig tijdens het doornemen van de richtlijnen. Zo’n checklist ondersteunt je bij het monitoren van je webtoegankelijkheid, het verkrijgen van inzicht in je vorderingen en het bepalen van toekomstige doelen.

Onze focus ligt op een holistische benadering van webtoegankelijkheid, wat inhoudt dat je alle aspecten van je website in overweging neemt. Daarom adviseren wij om webtoegankelijkheid niet in één keer volledig te veranderen, aangezien dit te veel tijd en geld kost en nadelig kan zijn voor je gebruikers.

We hebben de WCAG 2.1 ingedeeld op basis van niveaus. Wanneer je de richtlijnen doorloopt, ga je van niveau A (beginner) naar niveau AA (gemiddeld) en vervolgens naar niveau AAA (geavanceerd). In oktober 2023 is de nieuwe WCAG 2.2 geïntroduceerd.

Wat zijn de WCAG richtlijnen voor digitale toegankelijkheid?

De Web Content Accessibility Guidelines (WCAG) zijn internationale richtlijnen en aanbevelingen voor digitale toegankelijkheid. Dit is niet alleen om mensen met verschillende beperkingen, zoals cognitieve beperkingen (bijv. moeite met het begrijpen van complexe teksten) en motorische beperkingen (bijv. moeilijkheden met het bedienen van een muis), te ondersteunen, maar ook om websites toegankelijk te maken op diverse platformen.

De WCAG zijn ontwikkeld door de World Wide Web Consortium (W3C). W3C is een internationale organisatie die richtlijnen en standaarden voor het wereldwijde web ontwerpt, met als doel om het web toegankelijker en gebruiksvriendelijker te maken voor iedereen, inclusief mensen met beperkingen.

Momenteel zijn in Nederland alleen overheidsinstanties en hun websites verplicht om aan de WCAG 2.1-richtlijnen te voldoen. Dit betekent dat een publieke website toegankelijk moet zijn voor mensen met een beperking, met richtlijnen die minimale gebruiksvriendelijkheid garanderen.

Vanaf 2025 verandert dit echter met de inwerkingtreding van een nieuwe Europese norm: European Accessibility Act (EAA). De EAA zal ook nieuwe branches en bedrijven verplichten om digitale toegankelijkheid in acht te nemen, met name in sectoren zoals e-commerce, transport, banken en communicatie. Dit betekent dat meer bedrijven hun websites en apps aan WCAG-richtlijnen moet laten voldoen om juridische problemen te vermijden en een inclusieve gebruikerservaring te bieden. Wanneer bedrijven na 2025 niet voldoen aan de toegankelijkheidsnormen, kunnen zij te maken krijgen met verschillende juridische en financiële consequenties.

WCAG geeft richtlijnen voor digitale toegankelijkheid

De WCAG is de geaccepteerde standaard voor digitale toegankelijkheid. © levelaccess.com

De WCAG is de standaard voor digitale toegankelijkheid

De eerste versie van de WCAG werd in de begindagen van het internet opgesteld en wordt voortdurend aangevuld met nieuwe succescriteria. Om die reden is het een geaccepteerde standaard voor toegankelijkheid. De richtlijnen voor digitale toegankelijkheid van de WCAG bestrijken vele gebieden om webcontent toegankelijker te maken. Het gaan niet alleen over de opmaak van een website en navigatie van een website. Ook bij de visuele presentatie van niet-tekstuele content, zoals het gebruik van afbeeldingen en het correct inzetten van video en audio, is toegankelijkheid belangrijk. De WCAG beschrijft bijvoorbeeld dat je een alternatieve beschrijving moet toevoegen aan je afbeeldingen en dat een video ondertiteling moet bevatten en er mogen geen onverwachte veranderingen gebeuren als iemand door de pagina scrolt.

De WCAG-richtlijnen zijn gebaseerd op vier principes: waarneembaar, bedienbaar, begrijpelijk en robuust. Deze principes zijn belangrijk om webcontent toegankelijk te maken voor mensen met verschillende functiebeperkingen. Dit betekent dat gebruikers de website kunnen bedienen en navigeren op een wijze die aansluit bij hun behoeften, ongeacht welke hulpmiddelen of user agents ze gebruiken. De richtlijnen helpen ontwikkelaars bijvoorbeeld om niet-tekstuele content te identificeren en aan te passen, zoals grafische objecten, zodat deze door schermlezers gelezen kunnen worden.

Om te voorkomen dat je een lange lijst moet doorploegen of dingen over het hoofd ziet, bestaan er programma’s om jouw website te toetsen aan de WCAG. Een goed voorbeeld is de WAVE Web Accessibility Tool. Dit programma geeft je een overzicht van toegankelijkheidsproblemen van jouw website. Deze app is ook beschikbaar als browser-extensie voor Chrome of Firefox.

Inzicht in verschillende WCAG-niveaus

De WCAG-richtlijnen zijn onderverdeeld in drie niveaus van toegankelijkheid: Niveau A, Niveau AA en Niveau AAA. Elk niveau vertegenwoordigt een ander toegangscomfort voor gebruikers met een beperking:

  • Niveau A – Basisvereisten die minimale toegankelijkheid garanderen, zoals het toevoegen van alternatieve tekst aan afbeeldingen en dat kleur niet als enige visuele middel gebruikt wordt.
  • Niveau AA – Wordt gezien als de standaard en zorgt voor bredere toegankelijkheid. Voorbeelden zijn het waarborgen van goed kleurcontrast tussen tekst en achtergrond.
  • Niveau AAA – Het hoogst haalbare niveau dat maximale toegankelijkheid biedt, met criteria zoals uitgebreide audiobeschrijvingen voor video’s, die de ervaring voor alle gebruikers verbeteren.

Om een toegankelijk product te hebben moet je voldoen aan alle eisen van Niveau A en Niveau AA te voldoen. Om de richtlijnen van de WCAG wat toegankelijker te maken, vind je op deze pagina alle webrichtlijnen van de WCAG uitgelegd.

WCAG 2.1 | Niveau A (Beginner)

Richtlijn Samenvatting
1.1.1 – Niet-tekstuele inhoud Bied tekstalternatieven voor inhoud zonder tekst
1.2.1 – Alleen audio en alleen video (vooraf gemaakt) Bied een alternatief voor alleen video en audio
1.2.2 – Bijschriften (vooraf opgenomen) Geef bijschriften voor video’s met audio
1.2.3 – Audiobeschrijving of media-alternatief (vooraf opgenomen) Video met audio heeft een tweede alternatief
1.3.1 – Info en relaties Logische structuur
1.3.2 – Betekenisvolle volgorde Inhoud presenteren in een zinvolle volgorde
1.3.3 – Zintuiglijke kenmerken Gebruik meer dan één zintuig voor instructies
1.4.1 – Gebruik van kleur Gebruik geen presentatie die alleen met kleur te begrijpen is
1.4.2 – Audiobesturing Speel audio niet automatisch af
2.1.1 – Toetsenbord toegankelijk Alleen toegankelijk via toetsenbord
2.1.2 – Geen toetsenbord moeilijkheden Laat alles op jouw website bereikbaar zijn met het toetsenbord
2.1.4 – Enkel teken sneltoetsen Sneltoetsen die via het toetsenbord geactiveerd worden zijn door de gebruiker uit te zetten
2.2.1 – Instelbare timing De gebruiker kan tijdslimieten instellen
2.2.2 – Pauzeren, stoppen, verbergen Bied bedieningselementen voor het verplaatsen van inhoud
2.3.1 – Minder dan drie flitsen  Geen inhoud knippert meer dan drie keer per seconde
2.4.1 – Skip blokken Bied een skip ‘inhoud optie’ aan
2.4.2 – Paginatitel Gebruik handige en duidelijke paginatitels
2.4.3 – Volgorde Logische volgorde
2.4.4 – Doel van de link (in context) Het doel van elke link is duidelijk uit zijn context
2.5.1 – Aanwijzergebaren Functies die bediend worden met complexe gebaren kunnen zonder problemen uitgevoerd worden
2.5.2 – Aanwijzerannulering Klik/touch functies kunnen door de gebruiker afgebroken worden
2.5.3 – Label in naam Het label van besturingselementen met tekst bevat de naam van de zichtbare tekst
2.5.4 – Bewegingsactivering Functies die via een beweging worden bediend, kunnen ook via een alternatief worden bediend
3.1.1 – Taal van pagina Pagina is geschreven in een begrijpbare taal
3.2.1 – Focus Elementen veranderen niet wanneer ze focus krijgen
3.2.2 – Invoer elementen Elementen veranderen niet wanneer ze invoer ontvangen
3.2.6 – Consistente hulp (WCAG 2.2) Beschikbare hulp moet overal op dezelfde plaats terugkomen
3.3.1 – Fout identificatie Identificeer invoerfouten duidelijk
3.3.2 – Labels en instructies Label elementen en geef instructies
3.3.7 – Overbodige invoer (WCAG 2.2) Zorg dat bezoekers informatie die ze al hebben ingevuld, niet nóg een keer hoeven in te voeren op je website
4.1.1 – Parsing Geen grote codefouten
4.1.2 – Naam, rol, waarde Bouw alle elementen voor toegankelijkheid

WCAG 2.1 checklist Niveau AA (Gemiddeld)

 

Richtlijn Samenvatting
1.2.4 – Bijschriften (live) Live video’s hebben ondertitels
1.2.5 – Audiobeschrijving (vooraf opgenomen) Gebruikers hebben toegang tot audiobeschrijving voor video-inhoud
1.3.4 – Weergavestand Content blijft bruikbaar wanneer de weergave stand wisselt
1.3.5 – Identificeer het doel van de input Software is in staat om het doel van invoervelden te identificeren
1.4.3 – Contrast (minimaal) De contrastverhouding tussen tekst en achtergrond is minimaal 4,5: 1
1.4.4 – Formaat wijzigen Tekst kan worden verkleind tot 200% zonder verlies van inhoud of functie
1.4.5 – Afbeeldingen van tekst Gebruik geen afbeeldingen van tekst
1.4.10 – Reflow Tekst kan tot 400% vergroot worden
1.4.11 – Contrast van niet-tekstuele content De contrastverhouding tussen de gebruikersinterface en functionele grafische objecten is minimaal 3,0:1
1.4.12 – Tekstafstand Gebruikers kunnen de tekstafstand aanpassen zonder dat inhoud of functionaliteiten verloren gaan
1.4.13 – Content bij hover of focus Gebruikers kunnen aanvullende content verbergen
2.4.5 – Meerdere manieren Bied verschillende manieren om pagina’s te vinden
2.4.6 – Koppen en labels Gebruik duidelijke koppen en labels
2.4.7 – Toetsenbord begeleiding Zorg ervoor dat de toetsenbord begeleiding zichtbaar en helder is
2.4.11 Focus niet bedekt (minimum) (WCAG 2.2) Zorg dat de toetsenbord focus niet volledig bedekt is door content
2.5.7 – Sleepbewegingen (WCAG 2.2) Bied een toegankelijke alternatief voor slepende bewegingen / drag-and-drop bewegingen
2.5.8 Doelgebied grootte (WCAG 2.2) Maak interactieve knoppen en iconen groot genoeg zodat fouten voorkomen worden
3.1.2 – Taal van onderdelen Vertel gebruikers wanneer de taal op een pagina verandert
3.2.3 – Logische navigatie Het gebruik van een menu is logisch
3.2.4 – Consistente identificatie Gebruik pictogrammen en knoppen consistent
3.3.3 – Fout suggestie Stel oplossingen voor wanneer gebruikers fouten maken
3.3.4 – Fout preventie (juridisch, financieel, gegevens) Verminder het risico op invoerfouten voor gevoelige gegevens
3.3.8 – Toegankelijke authenticatie (minimum) (WCAG 2.2) Maak het gebruikers eenvoudiger om in te loggen en authenticatieprocessen te doorlopen
4.1.3 – Statusberichten Statusberichten onderbreken de gebruiker niet

WCAG 2.1 checklist Niveau AAA (Geavanceerd)

Richtlijn samenvatting
1.2.6 – Gebarentaal (vooraf gemaakt) Bied gebarentaal aan voor video’s
1.2.7 – Uitgebreide audiobeschrijving (vooraf gemaakt) Geef uitgebreide audiobeschrijving voor video’s
1.2.8 – Media-alternatief (vooraf gemaakt) Bied een tekstalternatief voor video’s
1.2.9 – Alleen audio (live) Bied alternatieven voor live audio
1.3.6 – Identificeer het doel Vanuit de broncode kan het doel opgemaakt worden
1.4.6 – Contrast (verbeterd) De contrastverhouding tussen tekst en achtergrond is minimaal 7: 1
1.4.7 – Lage of geen achtergrond audio Audio is duidelijk
1.4.8 – Visuele presentatie Bied gebruikers een scala aan presentatie-opties aan
1.4.9 – Afbeeldingen van tekst (zonder uitzonderingen) Gebruik geen afbeeldingen van tekst
2.1.3 – Toetsenbord (zonder uitzonderingen) Alleen toegankelijk via toetsenbord, zonder uitzonderingen
2.2.3 – Geen tijdslimieten Gebruik geen tijdslimieten op jouw website
2.2.4 – Onderbrekingen Onderbreek gebruikers niet
2.2.5 – Opnieuw verifiëren Bewaar gebruikersgegevens als een gebruiker opnieuw verifieert
2.2.6 – Time-outs Gebruikers worden voor een time-out gewaarschuwd
2.3.2 – Drie flitsen Geen inhoud knippert meer dan drie keer per seconde
2.3.3 – Animatie uit interacties Een bewegende animatie kan worden uitgezet 
2.4.8 – Locatie Laat gebruikers weten waar ze zijn
2.4.9 – Doel van de link Doel van elke link is duidelijk in de tekst
2.4.10 – Tussenkoppen Verdeel inhoud met koppen
2.4.12 – Focus niet bedekt (uitgebreid)(WCAG 2.2) Zorg dat de toetsenbord focus niet gedeeltelijk bedekt is door content
2.4.13 – Focusweergave (WCAG 2.2) Zorg dat de focus duidelijk zichtbaar is
2.5.5 – Grootte van het aanwijsgebied Interactieve elementen zijn minimaal 44 bij 44 CSS-pixels groot
2.5.6 – Input gelijktijdige invoermechanismen Websites sluiten geen invoermogelijkheden uit
3.1.3 – Ongebruikelijke woorden Leg vreemde woorden uit
3.1.4 – Afkortingen Leg eventuele afkortingen uit
3.1.5 – Leesniveau Gebruikers met negen jaar school kunnen de inhoud lezen
3.1.6 – Uitspraak Leg woorden uit die moeilijk uit te spreken zijn
3.2.5 – Wijziging op aanvraag Wijzig geen elementen op jouw website terwijl gebruikers erom vragen
3.3.5 – Help Geef gedetailleerde hulp en instructies
3.3.6 – Foutpreventie (alle) Verminder het risico op alle invoerfouten
3.3.9 – Toegankelijke authenticatie (WCAG 2.2) Maak het gebruikers eenvoudiger om in te loggen en authenticatieprocessen te doorlopen