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 van de WCAG is om digitale ervaringen voor mensen met een functiebeperking te verbeteren.

De drie niveaus van de WCAG

De WCAG bestaat uit drie niveaus: WCAG A, WCAG AA (wettelijk verplicht) en WCAG AAA. Per niveau komen verschillende onderwerpen aan bod en de richtlijnen worden steeds strenger:

• WCAG A: dit niveau heeft 30 richtlijnen en is het meest eenvoudige niveau om te behalen zonder dat het te veel impact heeft op je webdesign of structuur van je website.
• WCAG AA: dit niveau bestaat uit 20 richtlijnen. Je dient te voldoen aan de richtlijnen van niveau A (30 stuks) en aan de 20 richtlijnen van niveau AA. In totaal dus 50 richtlijnen.
• WCAG AAA: dit is het hoogste niveau van de WCAG. Je website of applicatie moet voldoen aan de 50 richtlijnen (niveau A + niveau AA) en de 28 richtlijnen die er in dit niveau bijkomen. In totaal dus 78 succes criteria.

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 50 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 beschrijvende teksten toe aan video’s en afbeeldingen die informatie delen

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 zich automatisch kunnen aanpassen aan elk beeldschermformaat

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 omzetten:

Zorg ervoor dat gebruikers dubbele content kunnen overslaan, zoals advertenties

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:

Maak gebruik van knoppen of selecteerbare elementen die minsten 44px bij 44px groot zijn.

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.

Ben je ook benieuwd hoe toegankelijk jouw website is?

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