Ontwerp toegankelijke interfaces die iedereen kan gebruiken. Deze praktische gids helpt je WCAG 2.2 AA compliant ontwerpen maken.
Waarom is dit belangrijk voor jou?
Een mooi ontwerp is pas echt goed als iedereen het kan gebruiken. Als vormgever wil je het liefst dat je ontwerp voor iedereen werkt.
Genoeg contrast en een duidelijke visuele hiërarchie verbeteren de gebruikerservaring voor iedereen. Mensen met een visuele functiebeperking kunnen je ontwerp beter gebruiken. Je ontwerp werkt beter op verschillende apparaten en blijft langer bruikbaar.
Neem toegankelijkheid gelijk mee in al je processen. Een ontwerp achteraf aanpassen kost veel meer tijd en geld.
Je belangrijkste taken
1. Zorg voor genoeg contrast
Gebruik genoeg contrast tussen voor- en achtergrondkleuren. Daarmee zorg je dat onderdelen goed van elkaar te onderscheiden zijn.
De regels:
- Normale tekst: minstens 4,5:1 contrastverhouding
- Grote tekst: minstens 3:1 contrastverhouding
- Niet-tekstuele bedieningselementen (invoervelden, knoppen, iconen): minstens 3:1 contrastverhouding
De 5-minuten check
- Inventariseer alle tekstkleuren op je pagina:
- Gewone tekst
- Links
- Knoppen
- Meet het contrast:
- Open je contrast checker
- Selecteer voorgrondkleur (tekst)
- Selecteer achtergrondkleur
- Controleer de contrastverhouding
- Beoordeel de resultaten:
- Normale tekst: minstens 4,5:1
- Grote tekst (24px+ of 18,5 px+ vetgedrukt): minstens 3:1
Lees meer over contrast (minimum)
Meet gelijk je contrast
De contrastverhouding is: 21:1
2. Ontwerp ook voor herschalen
Zorg dat je ontwerp ook goed werkt op kleinere schermen of als er flink wordt ingezoomd.
De regels:
- Horizontaal scrollen is niet nodig bij schermen van 320 pixels breed
- De tekst loopt niet over elkaar heen
- Alle functionaliteit blijft beschikbaar
De 5-minuten check
- Open je ontwerp op 1280×1024 resolutie
- Zoom in naar 400% in je browser of design tool
- Controleer deze punten:
- Is alle tekst nog leesbaar?
- Overlappen elementen met elkaar?
- Zijn alle bedieningselementen nog klikbaar?
- Moet je horizontaal scrollen om content te zien?
3. Maak aanwijsgebieden groot genoeg
Maak knoppen, links en andere klikbare elementen met minstens 24 bij 24 CSS-pixels groot. Mensen met een motorische beperking kunnen moeite hebben met kleine doelen.
Ontwerptips:
- Maak aanwijsgebieden groter dan de visuele weergave van je elementen
- Gebruik padding om het touch-target te vergroten
- Groepeer kleine elementen (zoals social media iconen) met genoeg ruimte ertussen
- Test zelf met een touchscreen apparaat
Hulpmiddelen voor vormgevers
Contrast controleren:
- Colour Contrast Analyser (CCA) (software)
- Berekent de contrastverhouding tussen 2 kleuren
- Kleurcodes of pipet
- WCAG Color contrast checker (browser extensie)
- Toont een overzicht van alle kleurcombinaties
- Controleert direct de contrastverhouding
- Download WCAG Color contrast checker:
- Contrast Grid (website)
- Berekent contrastverhoudingen tussen meerdere kleuren
Lees meer over hulpmiddelen bij het toetsen
Praktische tips
Bediening
- Maak het klikbare gebied van bedieningselementen (zoals knoppen en links) minstens 24 bij 24 pixels.
Formulieren
- Geef elk invoerveld een zichtbaar label. Gebruik geen placeholder als enige label.
- Maak duidelijk welke velden verplicht zijn, bijvoorbeeld met een asterisk (*) én een tekstuele uitleg.
- Plaats instructies vóór of naast het invoerveld.
Media
- Vermijd flitsende content. Als je het toch gebruikt, zorg dan dat het niet meer dan 3 keer per seconde flitst.
Navigeren
- Houd de positie van navigatie-elementen consistent op alle pagina’s.
- Zorg dat de volgorde van menu-items hetzelfde blijft op elke pagina.
Ontwerp
- Gebruik kleur nooit als enige manier om informatie over te brengen. Voeg bijvoorbeeld ook tekst, iconen of patronen toe.
- Zorg voor minimaal 4,5:1 contrast tussen tekst en achtergrond.
- Als je grote tekst gebruikt (minstens 24px of 18,5px vetgedrukt), zorg dan voor minimaal 3:1 contrast.
- Zorg dat bedieningselementen (zoals knoppen of invoervelden) minimaal 3:1 contrast hebben met de achtergrond.
- Zorg dat iconen en pictogrammen die belangrijk zijn voor de inhoud ook minimaal 3:1 contrast hebben.
- Ontwerp een duidelijk zichtbare focusstijl voor alle interactieve elementen. Gebruik bijvoorbeeld een opvallende rand of achtergrondkleur.
Weergave
- Zorg dat de hele content leesbaar en bedienbaar blijft bij 400% zoom.
- Voorkom dat iemand moet scrollen in twee richtingen (horizontaal én verticaal) na het inzoomen.
Handige bronnen
Succescriteria
Alle succescriteria waar vormgevers bij betrokken zijn:
Afbeeldingen
Bediening
- 2.2.2 Pauzeren, stoppen, verbergen
- 2.4.7 Focus zichtbaar
- 2.5.1 Aanwijzergebaren
- 2.5.4 Bewegingsactivering
- 2.5.7 Sleepbewegingen
- 2.5.8 Grootte van het aanwijsgebied (minimum)
Beweging
Formulieren
Media
Navigeren
Ontwerp
- 1.4.1 Gebruik van kleur
- 1.4.3 Contrast (minimum)
- 1.4.11 Contrast van niet-tekstuele content
- 2.5.8 Grootte van het aanwijsgebied (minimum)
- 3.2.3 Consistente navigatie
- 3.2.6 Consistente hulp
Techniek
Weergave
Meer hulp nodig?
Heb je vragen over toegankelijkheid, behoefte aan advies of wil je een onderzoek laten uitvoeren? Stuur me dan gerust een bericht via niek@wcag.nl of bezoek WCAG.nl voor meer informatie.
Ik maak WCAG-richtlijnen begrijpelijk en help je met het vinden van praktische oplossingen.