WCAG 2.2 checklist voor redacteuren

Als redacteur maak je de meeste toegankelijkheidskeuzes zonder dat je het meteen merkt. Een tekstalternatief bij een afbeelding, een beschrijvende kop in je tekst, een linktekst die vertelt waar je terechtkomt. Juist die keuzes bepalen of iemand met een schermlezer jouw pagina kan gebruiken.

Deze checklist bevat alleen punten die jij zelf kunt oplossen in het CMS.

Let op

Deze checklist is een hulpmiddel, geen norm. WCAG bestaat uit succescriteria die je per situatie beoordeelt, en dat laat zich niet volledig vertalen in een checklist. Wil je zeker weten of iets aan de eisen voldoet? Dan heb je een toegankelijkheidsonderzoek nodig.

Altijd controleren

Deze punten gelden voor elke pagina die je publiceert.

Tekst en koppen

Elke kop is gemaakt met de kop-opmaak uit de editor, niet met vetgedrukte of grotere tekst.
Elke kop beschrijft de tekst die eronder staat.
De koppen volgen de opbouw van de pagina.
Je gebruikt de kop-opmaak niet om tekst groter of dikker te maken.
Nadruk maak je met vet of cursief uit de editor. Niet met hoofdletters of met een kleur.
Elke instructie is te volgen zonder dat je vorm, kleur, grootte, plaats of geluid kunt waarnemen. Dus niet: ‘klik op de ronde knop rechts’.

Links en knoppen

Elke linktekst vertelt, eventueel in combinatie met de tekst eromheen, waar de link naartoe gaat.
Twee links met dezelfde tekst gaan naar dezelfde plek. Zo niet? Dan maakt de tekst eromheen het verschil duidelijk.
Geef je een knop of link zelf een naam mee in het CMS? Dan staat de zichtbare tekst daar letterlijk in.

De pagina als geheel

Elke pagina heeft een paginatitel die het onderwerp of doel van de pagina beschrijft.
De taal van de pagina staat goed ingesteld in het CMS.
Onderdelen die op meerdere pagina’s terugkomen, heten overal hetzelfde.

Alleen als dit op je pagina staat

Ga per onderwerp na of het op jouw pagina van toepassing is. Zo niet? Sla het dan over.

Afbeeldingen

Van toepassing als je pagina afbeeldingen, iconen, grafieken of infographics bevat.

Elke informatieve afbeelding heeft een tekstalternatief dat vertelt wat je ziet en welke informatie de afbeelding overbrengt.
Elke decoratieve afbeelding heeft een leeg tekstalternatief.
Elke afbeelding die als link of knop werkt, heeft een tekstalternatief dat het doel of de actie beschrijft.
Staat er tekst in de afbeelding van een link of knop? Dan staat diezelfde tekst in het tekstalternatief.
Elke complexe afbeelding, zoals een grafiek, diagram of infographic, heeft een kort tekstalternatief én een uitgebreide beschrijving in de tekst eronder of op een aparte pagina.
Er staat geen tekst in een afbeelding als dezelfde weergave ook met gewone tekst en opmaak haalbaar is.

Media

Van toepassing als je pagina een filmpje, een geluidsfragment of een animatie bevat.

Elk filmpje en elk geluidsfragment heeft in de tekst een korte omschrijving van wat je gaat zien of horen.
Elk geluidsfragment heeft een transcript, dicht bij het fragment op de pagina.
Brengt een filmpje zonder geluidsspoor informatie over in beeld? Dan is er een transcript of een geluidsspoor. Het transcript bevat alle tekst die in beeld staat en beschrijft de belangrijke beelden.
Elk vooraf opgenomen filmpje met geluid heeft ondertitels.
De ondertitels bevatten alle gesproken tekst, alle belangrijke geluiden en de namen van de sprekers als je niet ziet wie er praat.
De ondertitels zijn goed leesbaar en lopen gelijk met het geluid.
Brengen de beelden informatie over die je niet hoort? Dan is er een audiodescriptie.
Start er automatisch geluid dat langer dan 3 seconden duurt? Dan kun je het pauzeren, stoppen of dempen.

Beweging

Van toepassing als je pagina bewegende content bevat, zoals een carrousel, een GIF of een animatie.

Elke automatisch bewegende content die je zelf plaatst, zoals een carrousel of een bewegende GIF, is te pauzeren, te stoppen of te verbergen.
Er staat geen content op de pagina die meer dan 3 keer per seconde flitst.

Formulieren

Van toepassing als je zelf formulieren bouwt in een formulierbouwer, zoals Gravity Forms of Formdesk. Maakt een ontwikkelaar de formulieren? Sla dit onderwerp dan over.

Elk label beschrijft duidelijk wat er in het invoerveld moet worden ingevuld.
Elk label is zichtbaar.
Elke groep velden die bij elkaar hoort, zoals een set keuzerondjes, heeft een gezamenlijke naam via een groepslabel.
Bij elk verplicht veld staat dat het verplicht is, bijvoorbeeld met ‘(verplicht)’ in het label.
Stelt een veld eisen aan het formaat? Dan staan die eisen in het label of in een instructie bij het veld, bijvoorbeeld “dd-mm-jjjj”.
Zijn er aanvullende instructies bij een veld? Dan zijn die zichtbaar.
Elk veld dat persoonlijke gegevens vraagt, zoals naam, e-mailadres of adres, heeft in de formulierbouwer de juiste autocomplete-instelling.
Elke foutmelding staat in tekst en benoemt in welk veld de fout zit, wat er fout is en hoe je het oplost.
Elke verzendknop heeft een tekst die beschrijft wat er gebeurt als je erop klikt.

Tabellen en opsommingen

Van toepassing als je pagina een tabel of een opsomming bevat.

Elke tabel is gemaakt met de tabel-opmaak uit de editor.
Elke tabel heeft tabelkoppen die vertellen wat er in de kolom of de rij staat.
Er staat geen tabel op de pagina die alleen de opmaak regelt.
Elke opsomming is gemaakt met de lijst-opmaak uit de editor, niet met streepjes en enters.
Stappen staan in een geordende lijst, losse punten in een ongeordende lijst.

Kleuren die je zelf kiest

Van toepassing als je zelf kleuren kiest, bijvoorbeeld in een grafiek die je maakt, in een uitgelicht kader of in tekst met een eigen kleur. Kies je geen kleuren zelf? Sla dit onderwerp dan over.

Elke tekst heeft minimaal 4,5:1 contrastverhouding met de achtergrond.
Elke grote tekst (minstens 24px, of 18.5px vetgedrukt) heeft minimaal 3:1 contrastverhouding met de achtergrond.
Heb je een icoon of een onderdeel van een grafiek nodig om de informatie te begrijpen? Dan is de contrastverhouding met de kleuren ernaast minimaal 3:1.
Kleur is nergens de enige manier om informatie of een verschil duidelijk te maken. Er staat altijd ook tekst, een icoon of een patroon bij.
Elk onderdeel in een grafiek of diagram is herkenbaar aan meer dan kleur alleen. Is kleur toch het enige verschil? Dan hebben aangrenzende onderdelen minimaal 3:1 contrastverhouding.

Tekst in een andere taal

Van toepassing als je pagina woorden of zinnen in een andere taal dan de hoofdtaal bevat.

Elke tekst in een andere taal heeft de juiste taalcode meegekregen.

Werk je samen aan een project?

Toegankelijkheid is teamwerk. Deel deze checklists met je collega’s:

Wil je een breder overzicht van wat toegankelijkheid voor redacteuren betekent? Ga naar WCAG voor redacteuren. Of lees het complete overzicht van alle succescriteria uit WCAG 2.2, beknopt en helder uitgelegd.