De digitale toegankelijkheid en toegankelijkheid webrichtlijnen van de WCAG uitgelegd

Het bijzondere van de WCAG is dat deze niet toegankelijk is. Wij hebben gemerkt dat zelfs professionals moeite hebben met het lezen en doorspitten van deze webrichtlijnen. Kortom, de webrichtlijnen naar digitale toegankelijkheid zijn niet toegankelijk.

Het is handig om een ​​WCAG 2.1-checklist te hebben wanneer je de richtlijnen doorloopt. Een WCAG 2.1 checklist helpt je om de voortgang van je webtoegankelijkheid te controleren, enorme te leggen hoe je bent gekomen en je doelen voor de toekomst te bepalen.

Bij ons draait alles om holistische webtoegankelijkheid – dat betekent dat u met alles van uw website rekening houdt. Daarom is ons advies ook webtoegankelijkheid niet in één keer te veranderen – dit kost te veel tijd en geld en is het slecht voor je gebruikers.

Wij hebben de WCAG 2.1 op niveau gecategoriseerd. Als je de richtlijnen gaat doornemen, ga je van niveau A (beginner) via niveau AA (gemiddeld) en verder naar niveau AAA (geavanceerd). In december gaat de WCAG 2.2 in. In het artikel ‘Wat is er nieuw in de WCAG 2.2.’ lees je meer 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