De digitale toegankelijkheid en toegankelijkheid webrichtlijnen van de WCAG 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 aanbevelingen en richtlijnen 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 beter beschikbaar 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.

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 de visuele presentatie, zoals het gebruik van afbeeldingen en het correct inzetten van video en audio is belangrijk. De WCAG beschrijft bijvoorbeeld dat je een alternatieve beschrijving moet toevoegen aan je afbeeldingen en dat een video ondertiteling moet bevatten.

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.

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