WCAG 2.2 checklist voor vormgevers

Veel toegankelijkheidsproblemen ontstaan in het ontwerp, niet in de code. Een contrast dat net te laag is, een focusstijl die ontbreekt, een knop die te klein is: dat kan een ontwikkelaar later niet repareren zonder jouw ontwerp aan te passen. Hoe eerder je dit meeneemt, hoe minder werk het kost.

Deze checklist bevat alleen punten die jij in je ontwerp vastlegt

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 elk ontwerp dat je maakt.

Kleur en contrast

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 invoerveld en elk ander bedieningselement heeft minimaal 3:1 contrastverhouding met de achtergrond.
Elk icoon en elk grafisch onderdeel dat nodig is om de content te begrijpen, heeft minimaal 3:1 contrastverhouding met de kleuren ernaast. Dat geldt ook voor onderdelen in grafieken, diagrammen en kaarten.
Er staat geen informatie in je ontwerp waarbij kleur de enige manier is om iets over te brengen, een actie aan te geven of een element te onderscheiden. Er is ook tekst, een icoon of een patroon.
Elke toestand van een bedieningselement, zoals geselecteerd, ingedrukt of uitgeschakeld, is aan meer te herkennen dan aan kleur alleen en heeft minimaal 3:1 contrastverhouding.
Elke link in de lopende tekst is aan meer te herkennen dan aan kleur alleen, bijvoorbeeld met een onderstreping. Is kleur toch het enige verschil? Dan is het contrast met de omringende tekst minimaal 3:1 én krijgt de link bij hover en focus een extra aanduiding.
Er staat geen tekst in een afbeelding als dezelfde weergave ook met gewone tekst en opmaak haalbaar is.

Focus en klikgebied

Elk bedieningselement heeft een zichtbare focusindicator, bijvoorbeeld een rand om het element die verschijnt zodra het element focus krijgt.
Elke focusindicator heeft minimaal 3:1 contrastverhouding met de kleuren ernaast. Verandert alleen de kleur van het element zelf? Dan is het verschil met de normale toestand ook minimaal 3:1.
Er staat geen zwevend element in je ontwerp, zoals een sticky header of een cookiemelding, dat de focusindicator volledig bedekt.
Elk bedieningselement heeft een klikbaar gebied van minimaal 24 bij 24 CSS-pixels. Is dat niet haalbaar? Dan zit er genoeg ruimte rondom het element, of staat er elders op de pagina een gelijkwaardig element dat wel groot genoeg is.

Weergave en zoomen

Je ontwerp werkt in staande én liggende weergave. Er is geen vaste weergavestand geforceerd.
Er is geen melding die de content blokkeert met het verzoek om het apparaat te draaien.
Tekst is tot 200% te vergroten zonder dat content of functionaliteit verdwijnt.
Alle content blijft leesbaar en bedienbaar bij een breedte van 320 CSS-pixels (oftewel 400% zoom op een scherm van 1280 pixels). Bij content die bedoeld is om horizontaal te scrollen, geldt een minimale hoogte van 256 CSS-pixels.
Na inzoomen hoef je maar in één richting te scrollen.
Er staat geen zwevende of meebewegende content in je ontwerp, zoals een sticky header of een cookiemelding, die na inzoomen de content bedekt.

Alleen als dit van toepassing is

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

Formulieren

Van toepassing op elk formulier dat je ontwerpt, van een zoekveld tot een aanvraagproces.

Elk invoerveld heeft een zichtbaar label. Placeholdertekst is nergens het enige zichtbare label.
Elk verplicht veld is duidelijk gemarkeerd in het label, bijvoorbeeld met “(verplicht)”.
Elk verplicht veld is aan meer te herkennen dan aan kleur alleen, bijvoorbeeld niet alleen aan een rode rand.
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”.
Elke foutmelding is aan meer te herkennen dan aan kleur alleen. Er hoort tekst bij, en eventueel een icoon.

Navigeren

Van toepassing als je ontwerp meer dan één pagina of scherm heeft.

Elke navigatie staat op elke pagina op dezelfde plek.
De volgorde van de menu-items blijft op elke pagina hetzelfde.
Elk hulpmechanisme, zoals een contactpagina, chatfunctie of veelgestelde vragen, staat op elke pagina op dezelfde positie.

Beweging

Van toepassing als je ontwerp bewegende content heeft, zoals een carrousel, een animatie of een GIF.

Elke automatisch bewegende, knipperende of scrollende content in je ontwerp is te pauzeren, te stoppen of te verbergen.
Er staat geen onderdeel in je ontwerp dat meer dan 3 keer per seconde flitst.

Gebaren en slepen

Van toepassing als je bediening ontwerpt dat werkt met een aanwijzergebaar, een sleepbeweging of het bewegen van het apparaat.

Werkt iets met een complex aanwijzergebaar, zoals swipe of pinch? Dan is er ook een alternatief met een enkele klik of tik.
Werkt iets met een sleepbeweging, zoals drag-and-drop? Dan is er ook een alternatief met een enkele klik of tik.
Werkt een functie via bewegen, schudden of kantelen van het apparaat? Dan is er ook een alternatief via een bedieningselement, en is de bewegingsactivering uit te schakelen.

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 vormgevers betekent? Ga naar WCAG voor vormgevers. Of lees het complete overzicht van alle succescriteria uit WCAG 2.2, beknopt en helder uitgelegd.