WCAG 2.2 checklist voor redacteuren

Als redacteur maak je de meeste toegankelijkheidskeuzes zonder dat je het merkt. Een tekstalternatief bij een afbeelding, een kop die je met de kop-opmaak maakt in plaats van met vetgedrukte tekst, een linktekst die vertelt waar je terechtkomt. Precies 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 afvinkpunten. Wil je zeker weten of iets aan de eisen voldoet? Dan heb je een toegankelijkheidsonderzoek nodig.

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.
  • 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.
  • Elk symbool, unicode-teken en stukje ASCII-art in de tekst heeft een tekstalternatief.
  • Er staat geen tekst in een afbeelding als dezelfde weergave ook met gewone tekst en opmaak haalbaar is.
  • Staat er tekst in de afbeelding van een link of knop? Dan staat diezelfde tekst in het tekstalternatief.

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.

  • Elke groep velden die bij elkaar hoort, zoals een set keuzerondjes, heeft een gezamenlijke naam via een groepslabel.
  • Elk veld dat persoonlijke gegevens vraagt, zoals naam, e-mailadres of adres, heeft in de formulierbouwer de juiste autocomplete-instelling.
  • Elke verzendknop heeft een tekst die beschrijft wat er gebeurt als je erop klikt.
  • Elke foutmelding staat in tekst en benoemt in welk veld de fout zit, wat er fout is en hoe je het oplost.
  • Elk invoerveld heeft een zichtbaar en beschrijvend label.
  • Elk verplicht veld is duidelijk gemarkeerd, in het label of op formulierniveau, bijvoorbeeld met “(verplicht)” of een sterretje met uitleg.
  • 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.

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 ondertiteling.
  • 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.

Van toepassing op elke pagina die je publiceert.

  • Elke pagina heeft een paginatitel die het onderwerp of doel van de pagina beschrijft.
  • Elke linktekst vertelt, in combinatie met de tekst eromheen, waar de link naartoe gaat.
  • Komt dezelfde linktekst meerdere keren voor? Dan gaan die links naar dezelfde bestemming, of maakt de tekst eromheen het verschil duidelijk.
  • Elk terugkerend onderdeel en elke terugkerende functie heet op elke pagina hetzelfde.

Ontwerp

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.

  • Er staat geen informatie op de pagina waarbij kleur de enige manier is om iets over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden.
  • 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.
  • 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.
  • Elk icoon en elk grafisch onderdeel in een grafiek, diagram of infographic dat je nodig hebt om de content te begrijpen, heeft minimaal 3:1 contrastverhouding met aangrenzende kleuren.

Techniek

Van toepassing als je in de blokeditor zelf een naam instelt voor een knop of link.

  • Geef je een knop of link zelf een naam mee voor hulptechnologie, bijvoorbeeld via een tekstalternatief of een naam-instelling in de blokeditor? Dan bevat die naam de zichtbare tekst van de knop of link.

Tekst

Van toepassing op elke pagina die je publiceert.

  • Elke kop is gemaakt met de kop-opmaak uit de editor, niet met vetgedrukte of grotere tekst.
  • Er staat geen tekst op de pagina die als kop is opgemaakt om hem groter of dikker te maken.
  • De volgorde van de koppen staat de betekenis van de pagina niet in de weg.
  • 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.
  • Elke tabel is gemaakt met de tabel-opmaak uit de editor en heeft tabelkoppen die beschrijven wat er in de kolom of de rij staat.
  • Er staat geen tabel op de pagina die alleen de opmaak regelt.
  • Elke nadruk die betekenis overbrengt is opgemaakt met vet of cursief uit de editor, niet met hoofdletters of een kleur.
  • Er staat geen instructie op de pagina die alleen naar vorm, plaats of geluid verwijst, zoals “klik op de ronde knop” of “zie het menu rechts”.
  • Elke kop beschrijft de tekst die eronder staat.
  • De taal van de pagina staat goed ingesteld in het CMS.
  • Elke tekst in een andere taal heeft de juiste taalcode meegekregen.