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 december wordt WCAG 2.2 geïntroduceerd. Het artikel ‘Wat is er nieuw in de WCAG 2.2?’ biedt meer informatie over de nieuwe criteria.

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.3.1 – Fout identificatie Identificeer invoerfouten duidelijk
3.3.2 – Labels en instructies Label elementen en geef instructies
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
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
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.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