De Web Content Accessibility Guidelines (WCAG) helpen je om websites en apps toegankelijk te maken. De eisen zijn zo opgesteld dat je ze met verschillende technieken kunt toepassen.
De volledige norm is technisch en bevat voorwaarden en uitzonderingen. Op deze pagina vind je een vereenvoudigde uitleg van WCAG 2.2 op niveau A en AA. Gebruik voor een onderzoek altijd de volledige norm.
De uitleg is bewust kort en eenvoudig. Voor een beoordeling zijn altijd het volledige succescriterium, de voorwaarden en eventuele uitzonderingen nodig.
Wat is de WCAG?
WCAG is een internationale standaard van het World Wide Web Consortium (W3C). De richtlijnen worden ontwikkeld met bijdragen van mensen met een beperking en andere deskundigen.
WCAG houdt rekening met verschillende manieren waarop mensen informatie gebruiken. Denk aan iemand die een screenreader, brailleleesregel, schermvergroting, spraakbediening of alleen een toetsenbord gebruikt. Ook mensen met een gehoorbeperking of cognitieve beperking kunnen andere manieren nodig hebben om informatie te begrijpen en taken uit te voeren.
WCAG 2.2 bouwt voort op WCAG 2.1. Er zijn nieuwe criteria toegevoegd en criterium 4.1.1 is uit WCAG 2.2 verwijderd. Voldoen aan WCAG helpt veel mensen, maar dekt niet automatisch iedere toegankelijkheidsbehoefte.
De opbouw van de WCAG
WCAG 2.2 bestaat uit dertien richtlijnen, verdeeld over vier principes. Inhoud moet waarneembaar, bedienbaar, begrijpelijk en robuust zijn.
Onder elke richtlijn staan toetsbare succescriteria. Elk criterium heeft een niveau: A, AA of AAA. Voor niveau AA moet je voldoen aan alle toepasselijke criteria op niveau A én AA. Het niveau is geen eenvoudige maat voor de ernst van een probleem.
Hieronder staan alle 55 criteria op niveau A en AA van WCAG 2.2 in eenvoudige taal. De samenvattingen vervangen de volledige criteria en hun uitzonderingen niet. Bekijk daarvoor de officiële WCAG 2.2-norm en de Understanding-documenten van W3C.
WCAG in de wetgeving
Welke toegankelijkheidseisen juridisch gelden, hangt af van je organisatie, product of dienst en de toepasselijke wetgeving. Voor Nederlandse overheidswebsites en -apps is de Europese norm EN 301 549 het uitgangspunt, met daarin onder andere WCAG 2.1 op niveau A en AA.
WCAG 2.2 is een nieuwere versie van de technische richtlijnen. Dat betekent niet dat iedere wettelijke verplichting automatisch naar die versie verwijst. Lees meer bij DigiToegankelijk en op de pagina Wetgeving rond digitale toegankelijkheid.
WCAG 2.2 in begrijpelijke taal: niveau A en AA
Hieronder volgt een korte uitleg van de vier principes, dertien richtlijnen en de succescriteria op niveau A en AA. WCAG 2.2 bevat onder andere nieuwe eisen voor zichtbare toetsenbordfocus, sleepbewegingen, klikdoelen, hulp, herhaalde invoer en inloggen.
Principe 1: Waarneembaar
Presenteer informatie op manieren die mensen kunnen waarnemen. Laat belangrijke informatie niet afhangen van alleen zien of horen.
Richtlijn 1.1: Bied tekstalternatieven
1.1.1: Geef niet-tekstuele informatie een passend tekstalternatief. Voor decoratieve afbeeldingen en andere bijzondere situaties gelden uitzonderingen.
Richtlijn 1.2: Bied alternatieven voor tijdgebonden media
1.2.1: Bied een alternatief voor vooraf opgenomen audio zonder beeld en video zonder geluid.
1.2.2: Ondertitel vooraf opgenomen video met geluid, inclusief belangrijke geluiden.
1.2.3: Bied voor vooraf opgenomen video een audiobeschrijving of een volledig media-alternatief, volgens de voorwaarden van het criterium.
1.2.4: Ondertitel live video met geluid.
1.2.5: Geef audiobeschrijving bij vooraf opgenomen video waar belangrijke visuele informatie anders ontbreekt.
Richtlijn 1.3: Maak inhoud die op verschillende manieren kan worden weergegeven
1.3.1: Maak structuur en relaties, zoals koppen, lijsten en tabelverbanden, ook technisch herkenbaar of beschikbaar in tekst.
1.3.2: Zorg voor een technisch herkenbare leesvolgorde als de volgorde van invloed is op de betekenis.
1.3.3: Laat instructies niet uitsluitend afhangen van kenmerken zoals vorm, kleur, grootte, geluid of plaats.
1.3.4: Ondersteun zowel liggende als staande schermoriëntatie, tenzij één oriëntatie essentieel is.
1.3.5: Maak bij relevante invoervelden voor persoonsgegevens het doel technisch herkenbaar, bijvoorbeeld met passende autocomplete-attributen.
Richtlijn 1.4: Maak inhoud gemakkelijk voor mensen om te zien en te horen
1.4.1: Gebruik kleur niet als enige manier om informatie, een actie of een verschil duidelijk te maken.
1.4.2: Laat mensen automatisch afspelende audio van meer dan drie seconden pauzeren of stoppen, of het volume afzonderlijk regelen.
1.4.3: Geef gewone tekst minimaal 4,5:1 contrast en grote tekst minimaal 3:1, met de uitzonderingen uit de norm.
1.4.4: Laat tekst tot 200% vergroten zonder verlies van inhoud of functionaliteit.
1.4.5: Gebruik echte tekst in plaats van afbeeldingen van tekst, behalve waar dit essentieel of aanpasbaar is.
1.4.10: Laat inhoud bij vergroting bruikbaar blijven zonder in twee richtingen te moeten scrollen, behalve waar een tweedimensionale weergave noodzakelijk is.
1.4.11: Zorg voor voldoende contrast, doorgaans minimaal 3:1, bij noodzakelijke visuele informatie in bedieningselementen en afbeeldingen.
1.4.12: Laat mensen ruimere regel-, alinea-, letter- en woordafstand instellen zonder verlies van inhoud of functionaliteit.
1.4.13: Maak extra inhoud bij hover of focus waar nodig sluitbaar, aanwijsbaar en blijvend beschikbaar zolang iemand die nodig heeft.
Principe 2: Bedienbaar
Mensen moeten de interface kunnen bedienen en hun weg kunnen vinden, bijvoorbeeld met een toetsenbord, aanraakscherm of spraakbediening.
Richtlijn 2.1: Zorg dat de functionaliteit werkt met een toetsenbord
2.1.1: Maak functies bedienbaar met een toetsenbord, behalve invoer die wezenlijk van een bewegingspad afhangt.
2.1.2: Voorkom dat toetsenbordgebruikers vast komen te zitten in een onderdeel.
2.1.4: Laat sneltoetsen met één teken uitschakelen of aanpassen, of activeer ze alleen wanneer het betreffende onderdeel focus heeft.
Richtlijn 2.2: Geef mensen voldoende tijd om inhoud te lezen en te gebruiken
2.2.1: Laat tijdslimieten waar nodig uitzetten, aanpassen of verlengen.
2.2.2: Geef controle over bewegende, knipperende, scrollende of automatisch bijgewerkte informatie wanneer het criterium dat vereist.
Richtlijn 2.3: Veroorzaak geen epileptische aanvallen
2.3.1: Vermijd flitsen die de grenswaarden voor epileptische aanvallen overschrijden.
Richtlijn 2.4: Bied manieren om mensen te helpen navigeren en inhoud te vinden
2.4.1: Geef een manier om herhaalde blokken inhoud over te slaan.
2.4.2: Geef pagina’s een titel die het onderwerp of doel beschrijft.
2.4.3: Zorg voor een focusvolgorde die betekenis en bediening ondersteunt.
2.4.4: Maak het doel van een link duidelijk uit de linktekst of uit de technisch herkenbare context.
2.4.5: Bied meer dan één manier om pagina’s binnen een verzameling te vinden, behalve bij stappen in een proces.
2.4.6: Gebruik koppen en labels die het onderwerp of doel beschrijven.
2.4.7: Maak toetsenbordfocus zichtbaar.
2.4.11: Voorkom dat een onderdeel met toetsenbordfocus volledig wordt bedekt door inhoud die de website zelf plaatst.
Richtlijn 2.5: Maak functies eenvoudig te gebruiken door middel van verschillende invoer mogelijkheden naast het toetsenbord
2.5.1: Bied voor complexe of meervingergebaren ook een eenvoudige bediening met één aanwijzer, tenzij het gebaar essentieel is.
2.5.2: Voorkom onbedoelde activatie door acties bij loslaten uit te voeren of een geschikte manier te bieden om te annuleren of ongedaan te maken.
2.5.3: Laat de toegankelijke naam van een bedieningselement de zichtbare labeltekst bevatten.
2.5.4: Bied een alternatief voor bediening door beweging van het apparaat en laat onbedoelde bewegingsbediening uitschakelen.
2.5.7: Bied voor slepen ook een bediening met één aanwijzer zonder sleepbeweging, tenzij slepen essentieel is.
2.5.8: Maak klikdoelen minstens 24 bij 24 CSS-pixels of voldoe aan een toegestane uitzondering, bijvoorbeeld voldoende afstand tussen kleinere doelen.
Principe 3: Begrijpelijk
Maak informatie begrijpelijk. Zorg dat onderdelen voorspelbaar werken en help mensen bij het invullen en corrigeren van gegevens.
Richtlijn 3.1: Maak tekst begrijpelijk en leesbaar
3.1.1: Geef de taal van de pagina technisch aan.
3.1.2: Geef taalwisselingen in passages technisch aan, met de uitzonderingen uit de norm.
Richtlijn 3.2: Maak pagina's voorspelbaar
3.2.1: Laat het ontvangen van focus niet vanzelf een contextwijziging veroorzaken.
3.2.2: Laat het wijzigen van een instelling geen onverwachte contextwijziging veroorzaken.
3.2.3: Houd de relatieve volgorde van herhaalde navigatie consistent.
3.2.4: Geef onderdelen met dezelfde functie een consistente identificatie.
3.2.6: Plaats herhaalde hulpmechanismen in dezelfde relatieve volgorde op verschillende pagina’s.
Richtlijn 3.3: Help mensen fouten te voorkomen en te herstellen
3.3.1: Beschrijf invoerfouten in tekst en maak duidelijk welk onderdeel fout is.
3.3.2: Geef labels of instructies wanneer iemand informatie moet invoeren.
3.3.3: Geef waar mogelijk bruikbare suggesties om invoerfouten te herstellen, tenzij dit de beveiliging of het doel van de inhoud zou schaden.
3.3.4: Laat belangrijke juridische, financiële of gegevenswijzigingen terugdraaien, controleren of bevestigen zoals het criterium voorschrijft.
3.3.7: Laat informatie die binnen hetzelfde proces al is ingevuld opnieuw gebruiken of selecteren, behalve bij de toegestane uitzonderingen.
3.3.8: Vereis bij inloggen geen cognitieve test zonder een alternatief, ondersteuning of een toegestane uitzondering. Ondersteun bijvoorbeeld wachtwoordmanagers en plakken.
Principe 4: Robuust
Gebruik technieken zo dat browsers en hulptechnologieën de inhoud en bedieningselementen goed kunnen interpreteren.
Richtlijn 4.1: Zorg voor ondersteuning met verschillende browsers en hulptechnologieën
4.1.2: Maak naam, rol, waarde en veranderende toestanden van bedieningselementen technisch beschikbaar voor hulptechnologieën.
4.1.3: Maak statusberichten herkenbaar voor hulptechnologieën zonder dat iemand de focus hoeft te verplaatsen.
