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 afvinkpunten. Wil je zeker weten of iets aan de eisen voldoet? Dan heb je een toegankelijkheidsonderzoek nodig.
Afbeeldingen
Van toepassing als je ontwerp afbeeldingen, iconen of beeldmateriaal met tekst bevat.
- Er staat geen tekst in een afbeelding als dezelfde weergave ook met gewone tekst en opmaak haalbaar is.
Bediening
Van toepassing op elk ontwerp met knoppen, links of andere bedieningselementen.
- Elk bedieningselement heeft een zichtbare focusindicator, bijvoorbeeld een rand om het element die verschijnt zodra het element focus krijgt.
- Er staat geen zwevend element in je ontwerp, zoals een sticky header of een cookiemelding, dat de focusindicator volledig bedekt.
- Werkt iets met een complex aanwijzergebaar, zoals swipe of pinch? 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.
- Werkt iets met een sleepbeweging, zoals drag-and-drop? Dan is er ook een alternatief met een enkele klik of tik.
- Elke knop en link 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.
Beweging
Van toepassing als je ontwerp bewegende content bevat, 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.
Formulieren
Van toepassing als je een formulier ontwerpt, van een zoekveld tot een aanvraagproces.
- Elk verplicht veld is aan meer te herkennen dan aan kleur alleen, bijvoorbeeld niet alleen aan een rode rand.
- Elke foutmelding is aan meer te herkennen dan aan kleur alleen. Er hoort tekst bij, en eventueel een icoon.
- 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)”.
- 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”.
Navigeren
Van toepassing op elk ontwerp met meer dan één pagina of scherm.
- Elke navigatie staat op elke pagina op dezelfde positie, in dezelfde relatieve volgorde ten opzichte van de rest van de pagina.
- 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.
Ontwerp
Van toepassing op elk ontwerp.
- 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 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.
- 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 aangrenzende kleuren. Dat geldt ook voor onderdelen in grafieken, diagrammen en kaarten.
- Elke focusindicator heeft minimaal 3:1 contrastverhouding met de aangrenzende kleuren. Verandert alleen de kleur van het element zelf? Dan is het verschil met de normale toestand ook minimaal 3:1.
- 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.
Weergave
Van toepassing op elk ontwerp.
- 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 hoeft niemand zowel horizontaal als verticaal 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.