Benieuwd naar de mogelijkheden? Wij helpen je graag verder!

• Ontdek de mogelijkheden
• Direct een offerte aanvragen

Wat zijn de WCAG 2.1 criteria?

Om digitale toegankelijkheid te borgen heeft het World Wide Web Consortium (W3C) een aantal richtlijnen ontwikkeld; de Web Content Accessibility Guidelines (WCAG). Deze richtlijnen zijn sinds 1999 de wereldwijde standaard voor digitale toegankelijkheid en hebben betrekking op het ontwerpen, bouwen en onderhouden van websites en applicaties. Het doel van de WCAG is om digitale ervaringen voor mensen met een functiebeperking te verbeteren.

De drie niveaus van de WCAG

De WCAG kent drie niveaus: A, AA (wettelijk verplicht) en AAA. Elk niveau bevat strengere eisen op het gebied van digitale toegankelijkheid:

• WCAG A: Bevat de minimale toegankelijkheidsvereisten (30 succescriteria)

• WCAG AA: Bouwt voort op niveau A en voegt 20 extra succescriteria toe (in totaal 50). Dit is het verplichte niveau voor (semi-)overheidsinstanties en onder bepaalde voorwaarden ook voor bedrijven.

• WCAG AAA: Het hoogste toegankelijkheidsniveau, met 28 aanvullende succescriteria (totaal 78). Dit niveau is niet wettelijk verplicht, maar verhoogt de toegankelijkheid aanzienlijk.

Met de WCAG richtlijnen kunnen webbouwers gerichter ontwikkelen voor mensen met een beperking.

De 4 principes van de WCAG

De WCAG richtlijnen zijn gebaseerd op vier basisprincipes:

1. Waarneembaar: de content op je website/applicatie moet waarneembaar zijn met de zintuigen die iemand tot zijn/haar beschikking heeft. Iedereen moet de content kunnen gebruiken en ervaren, ook iemand die bijvoorbeeld blind is
2. Bedienbaar: alle gebruikers moeten de interface (koppelingen tussen mens en computer en tussen o.a. software en hardware) kunnen bedienen. Denk bijvoorbeeld aan het gebruiken van de navigatie met een toetsenbord in plaats van een muis
3. Begrijpelijk: de content en de bediening van een website/applicatie moet te begrijpen zijn
4. Robuust: het is belangrijk dat de content verwerkt, begrepen en getoond kan worden door verschillende browsers en hulpapparatuur, zoals een screenreader. Daarom moet de content robuust zijn en de juiste codes bevatten

De succescriteria voor het behalen van het verplichte Niveau AA

Principe 1: waarneembaar

1. Tekstalternatieven:

Lever tekstalternatieven (ALT-teksten) aan voor de content zonder tekst (zoals afbeeldingen), zodat deze omgezet kan worden naar bijvoorbeeld braille, spraak of symbolen

1.1 Niet tekstuele content:

Voeg transcripties toe voor audio en audiodescripties voor video’s die belangrijke informatie bevatten.

1.2 Op tijd gebaseerde media:

Lever alternatieven aan voor video- of geluidsfragmenten. Let op, er zit een verschil tussen de regels voor eerder opgenomen audio en video en live uitzendingen.

1.2.1 Alleen audio en alleen video (vooraf opgenomen):

Maak deze toegankelijk door een tekstalternatief toe te voegen, zoals ondertiteling of een transcriptie (omzetten van audio naar tekst). Belangrijk: zorg ervoor dat het tekstalternatief precies dezelfde informatie bevat!

1.2.2 Ondertitels (vooraf opgenomen):

Lever ondertiteling voor doven en slechthorenden, inclusief beschrijving van geluidseffecten en muziek

1.2.3 Audiodescriptie of media alternatief:

Voeg audiodescriptie toe; beeldbeschrijving. Een stem vertelt wat anderen op dat moment zien, bijvoorbeeld gezichtsuitdrukkingen. Als alle informatie van het audio- of videobestand al in een tekst geschreven staat, heet dit een media alternatief en gelden er speciale regels. Als dit duidelijk vermeld wordt, hoef je voor de video- en audiobestanden niet nogmaals een alternatief te bieden

1.2.4 Ondertitels (live):

Lever ondertiteling voor doven en slechthorenden

1.2.5 Audiodescriptie (vooraf opgenomen):

Maak gebruik van audiodescriptie (beeldbeschrijving)

1.3 Aanpasbaar:

Maak content die je op diverse manieren kan presenteren zonder dat er informatie of structuur verloren gaat

1.3.1 Info en relaties:

Zorg ervoor dat je in je code duidelijk maakt wat het verband is tussen de verschillende onderdelen van je website en maak helder wat de functies van de teksten en de elementen (koppen etc.) zijn

1.3.2 Betekenisvolle volgorde:

Zorg ervoor dat je bezoekers de inhoud van je website op de juiste volgorde kunnen lezen

1.3.3 Zintuiglijke eigenschappen:

Geef een tekstuele omschrijving (met instructies) aan de elementen op je website, zodat je bezoekers weten welke acties hieraan vastzitten

1.3.4 Weergavestand:

Je website moet zowel in portret- als landschapsmodus correct functioneren.

1.3.5 Input doel identificeren:

Koppel labels en invoervelden aan elkaar en zorg ervoor dat je bezoekers formulieren goed kunnen gebruiken en invullen

1.4 Onderscheidbaar:

Zorg ervoor dat gebruikers content eenvoudig kunnen horen en zien.

1.4.1 Kleurgebruik:

Informatie die je deelt in kleur of vorm dien je ook over te brengen met tekst. Lees de tekst bijvoorbeeld voor, of geef andere visuele hints, zoals het onderstrepen van gekleurde teksten

1.4.2 Geluidsbediening:

Een geluidsfragment dat automatisch langer dan drie seconden duurt, moet gepauzeerd, gestopt en harder/zachter gezet kunnen worden

1.4.3 Contrast (minimum):

Zorg voor een contrast van minstens 4,5:1 tussen voor- en achtergrondkleuren, zodat teksten goed te lezen zijn

1.4.4 Herschalen van tekst:

Teksten moeten met 200% te vergroten zijn en leesbaar blijven

1.4.5 Afbeeldingen van tekst:

Gebruik om informatie te delen echte tekst in plaats van afbeeldingen met tekst. Dit is vooral handig voor gebruikers die voorleessoftware gebruiken

1.4.10 Reflow:

Zorg ervoor dat je website er op elk beeldscherm goed uitziet en test dit op verschillende apparaten

1.4.11 Niet tekstueel contrast:

Zorg voor genoeg contrast tussen de verschillende elementen op je website

1.4.12 Tekstafstand:

Hou je webteksten leesbaar en zorg voor voldoende tekstafstand. Denk hierbij aan o.a. lettergrootte en afstand tussen regels

1.4.13 Content bij hover of focus:

Gebruik je een pop-up? Zorg ervoor dat een gebruiker deze kan gebruiken en weer kan verwijderen

Maak alles in je scherm makkelijk waarneembaar en logisch qua volgorde.

Principe 2: Bedienbaar

2.1 Toetsenbord toegankelijk:

Zorg ervoor dat alle functionaliteiten te gebruiken zijn met een toetsenbord

2.1.1 Toetsenbord:

Je hele website moet te bedienen zijn met een toetsenbord

2.1.2 Geen toetsenbordval:

Als een bezoeker wel een pagina kan bezoeken, maar niet meer kan verlaten, komt hij/zij in een ‘toetsenbordval’ terecht. Zorg voor een goede website structuur om dit te voorkomen

2.1.4 Enkel teken sneltoetsen:

Zorg ervoor dat bezoekers sneltoetsen kunnen in- en uitschakelen en zonder moeilijkheden kunnen navigeren naar de juiste pagina’s

2.2 Genoeg tijd:

Geef je bezoeker genoeg tijd om content te bekijken en begrijpen

2.2.1 Timing aanpasbaar:

Maak je gebruik van content met een tijdslimiet? Zorg er dan voor dat deze kan worden uitgezet, aangepast of verlengd, zodat de gebruiker zelf kan kiezen wanneer hij/zij de content gelezen en begrepen heeft

2.2.2 Pauzeren, stoppen, verbergen:

Bewegende, knipperende of scrollende informatie moet kunnen worden gepauzeerd, gestopt of verborgen. Ditzelfde geldt voor automatisch actualiserende content

2.3 Toevallen:

Ontwerp geen content die toevallen kan veroorzaken, zoals een epileptische aanval

2.3.1 Drie flitsen of beneden drempelwaarde:

Bouw je website met zo min mogelijk afleidingen en zorg ervoor dat het niet meer dan drie keer per seconde flitst

2.4 Navigeerbaar:

Help gebruikers eenvoudig navigeren en content vinden

2.4.1 Blokken overslaan:

Zorg ervoor dat gebruikers herhalende content, zoals navigatiemenu’s en advertenties, kunnen overslaan voor snellere toegang tot de hoofdinhoud.

2.4.2 Paginatitel:

Webpagina’s hebben titels die het onderwerp of het doel beschrijven

2.4.3 Focus volgorde:

Een logische volgorde van je website en pagina’s zorgt ervoor dat je inhoud blijft zoals het is bedoeld

2.4.4 Linkdoel (in context):

Beschrijf het doel van een link duidelijk met een begeleidende tekst.

2.4.5 Meerdere manieren:

Maak het op diverse manieren, minimaal twee, mogelijk om je webpagina’s te bereiken

2.4.6 Koppen en labels:

Beschrijf hiermee het onderwerp of het doel en maak je gebruiker snel duidelijk waar de tekst over gaat

2.4.7 Focus zichtbaar:

Wanneer een gebruiker je website met een toetsenbord bedient, is het belangrijk dat hij/zij kan zien welk onderdeel de focus heeft

2.5 Input modaliteiten:

Je website en applicatie(s) moeten te gebruiken zijn met diverse aanwijsapparaten, zoals een toetsenbord en een laseraanwijzer

2.5.1 Aanwijzergebaren:

Naast een muisaanwijzer moeten er alternatieven voor bedienen aangeboden te worden, zoals werken met de pijltjestoetsen

2.5.2 Aanwijzerannulering:

Selecteert een bezoeker iets verkeerd? Zorg er dan voor dat dit eenvoudig ongedaan kan worden, zoals het inzetten van de ESC knop

2.5.3 Label in naam:

Omschrijf met een duidelijke tekst het doel van een element

2.5.4 Bewegingsactivering:

Functies moeten ook geactiveerd kunnen worden door andere manieren dan apparaat- of gebruikersbeweging.

2.5.5 Grootte van het aanwijsgebied:

Zorg ervoor dat knoppen en selecteerbare elementen een minimale aanraakbare grootte van 44x44 pixels hebben, inclusief eventuele extra omliggende ruimte.

2.5.6 Input gelijktijdige invoermechanismen:

Functies moeten gelijk blijven voor de gebruiker, ook wanneer er gewisseld wordt tussen bijvoorbeeld toetsenborden, muizen of schermen.

Maak bijvoorbeeld input velden, knoppen en labels groot en logisch genoeg.

Principe 3: Begrijpelijk

3.1 Leesbaar:

Maak je content toegankelijk voor al je bezoekers en maak gebruik van o.a. eenvoudig taalgebruik, gebarentaal en duidelijke vormgeving

3.1.1 Taal van de pagina:

Stel de juiste taal in, zodat schermlezers het goed kunnen uitspreken

3.1.2 Taal van onderdelen:

Staan er stukken tekst op je website in een andere taal? Geef dit duidelijk aan

3.2 Voorspelbaar:

Maak het uiterlijk en de bediening van je webpagina’s voorspelbaar, zodat de inhoud goed te begrijpen is

3.2.1 Bij focus:

De context van de inhoud mag niet wijzigen als een bepaald onderdeel van de content de focus krijgt

3.2.2 Bij input:

De context wijzigt niet automatisch, maar er moet een extra controle klik plaatsvinden. Denk bijvoorbeeld aan een verzendknop na het invullen van een formulier, zodat deze niet automatisch verzendt

3.2.3 Consistentie navigatie:

Zorg ervoor dat de onderdelen van de navigatie overal in dezelfde volgorde terugkomt en creëer structuur en duidelijkheid

3.2.4 Consistentie identificatie:

Voorzie onderdelen met hetzelfde doel van dezelfde beschrijvingen.

3.3 Assistentie bij invoer:

Help gebruikers bij het vermijden van fouten en ze te verbeteren

3.3.1 Foutidentificatie:

Laat de gebruiker zien waar de fout zich bevindt door bijvoorbeeld een markering

3.3.2 Labels of instructions:

Als content de invoer door een gebruiker nodig heeft, lever je duidelijke labels en/of instructies aan

3.3.3 Foutsuggestie:

Als een formulier foutief ingevuld wordt, laat je duidelijk zien waar de fout zit en geef je wanneer mogelijk een suggestie om de fout te verbeteren

3.3.4 Foutpreventie (wettelijk, financieel, gegevens):

Help bezoekers grote fouten te voorkomen als het gaat om belangrijke acties, zoals wettelijke of financiële transacties.

Maak indicaties en checks duidelijk voor de gebruiker, bijvoorbeeld met behulp van een beschrijvende foutmelding.

Principe 4: Robuust

4.1 Compatibel:

Maximaliseer compatibiliteit (de mate waarin systemen samen te gebruiken zijn) met huidige en toekomstige user agents (computerprogramma’s die bij een netwerkfunctie of protocol hoort. In de context van webpagina’s geeft useragent aan welke webbrowser wordt gebruikt). Inclusief hulp technologieën.

4.1.1 Parsen:

Parsen is het analyseren van informatie aan de hand van losse elementen. De content wordt eerst ontleed en hierna worden de gegevens geanalyseerd. De elementen dienen begin- en eindtags te hebben, bevatten geen dubbele eigenschappen en alle ID’s zijn uniek. De codes in je website moeten kloppend en foutloos zijn. Alleen dan kunnen de pagina’s juist gelezen worden door o.a. hulptechnologie.

4.1.2 Naam, rol, waarde:

Voor alle componenten moet het mogelijk zijn om de naam, rol en waarde aan te passen door de gebruiker.

4.1.3 Statusberichten:

Als de content veranderd, geef je dit aan via een statusbericht. Bijvoorbeeld wanneer de zoekknop ingedrukt wordt en er zoekresultaten verschijnen.

Wetgeving en de WCAG 2.1

Voor (semi-)overheidsinstanties in Nederland is het sinds 2019 verplicht dat nieuwe websites voldoen aan WCAG 2.1 niveau A en AA. Bestaande websites moeten hier vanaf 2020 aan voldoen, en mobiele apps vanaf 2021.

De European Accessibility Act (EAA) treedt op 28 juni 2025 in werking en verplicht bepaalde commerciële sectoren, zoals e-commerce, online banken en telecommunicatie, om digitale toegankelijkheid te waarborgen.

WCAG 2.1 AA voor de overheid

Overheidsinstanties zijn verplicht om digitale toegankelijkheid serieus te nemen. Dit betekent dat ze:

• Een toegankelijkheidsverklaring moeten publiceren, waarin ze transparant aangeven in hoeverre hun website of app voldoet aan de WCAG-richtlijnen.
• Regelmatig een toegankelijkheidsonderzoek moeten laten uitvoeren, bijvoorbeeld volgens de WCAG-EM methode, om verbeterpunten in kaart te brengen.
• Continu moeten blijven optimaliseren, want digitale toegankelijkheid is geen eenmalige taak, maar een doorlopend proces.
  Het niet naleven van deze verplichtingen kan leiden tot handhaving door toezichthouders, klachtenprocedures of reputatieschade.

De WCAG 2.1 AA voor bedrijven

Hoewel de wetgeving zich oorspronkelijk vooral op overheidsinstanties richtte, wordt digitale toegankelijkheid ook voor bedrijven steeds belangrijker. Dit komt doordat:

• De European Accessibility Act (EAA) verplicht bedrijven vanaf 2025 om hun digitale diensten en platforms toegankelijk te maken.

• Een toegankelijke website een breder publiek bereikt, waardoor je potentiële klantenkring aanzienlijk groeit.

• Zoekmachines zoals Google waarderen toegankelijke websites, wat indirect kan bijdragen aan betere SEO en hogere posities in zoekresultaten.

• Een verbeterde gebruikservaring leidt tot meer conversies, omdat bezoekers eenvoudiger kunnen navigeren en sneller de informatie vinden die ze zoeken.

Dit is hoe wij jou helpen met de WCAG 2.1 AA

Bij Accessible Minds bieden wij diverse diensten aan om jouw website of app WCAG 2.1-proof te maken:

• WCAG 2.1 audits – Een grondige check van jouw website volgens de officiële WCAG-EM methode​.
• Quickscans – Een snelle analyse om de grootste toegankelijkheidsproblemen in kaart te brengen​.
• Trainingen en advies – We leren jouw team hoe ze digitale toegankelijkheid kunnen integreren in hun workflow​.
• Implementatiebegeleiding – We helpen met de technische aanpassingen om jouw website WCAG 2.1-compliant te maken.

Wil jij weten hoe toegankelijk jouw website is? Neem dan contact met ons op voor een vrijblijvend adviesgesprek!

Klaar voor digitale toegankelijkheid?

Neem dan contact op met ons voor een verkennend gesprek over de mogelijkheden om jouw website voor 2025 toegankelijk te maken.