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?
Als vormgever wil je ontwerpen maken die goed werken en er professioneel uitzien. Maar een mooi ontwerp is geen goed ontwerp als gebruikers het niet kunnen bedienen of begrijpen. Daarom is inclusief ontwerpen belangrijk voor een succesvolle vormgeving.
Als je genoeg contrast gebruikt en duidelijke visuele hiërarchie creëert, dan verbeter je de gebruikerservaring voor iedereen. Hierdoor wordt je ontwerp niet alleen toegankelijk voor mensen met een visuele beperking, maar ook beter bruikbaar op verschillende apparaten. Bovendien maken toegankelijke ontwerpkeuzes je werk toekomstbestendiger en professioneler.
Neem toegankelijkheid vanaf het begin mee, omdat herontwerpen veel kostbaarder is dan goed ontwerpen.
Je belangrijkste taken
1. Zorg voor genoeg contrast
Gebruik genoeg contrast tussen voorgrond- en achtergrondkleuren. Daarmee zorg je dat onderdelen goed van elkaar te onderscheiden zijn.
De regels:
- Normale tekst: minimaal 4,5:1 contrastverhouding
- Grote tekst: minimaal 3:1 contrastverhouding
- UI-elementen (knoppen, iconen): minimaal 3:1 contrastverhouding
- Focusindicators: minimaal 3:1 contrastverhouding
Tip: Maak een kleurenpalet met combinaties die genoeg contrast hebben.
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: minimaal 4,5:1
- Grote tekst (24px+ of 18,7px+ vetgedrukt): minimaal 3:1
Lees meer over contrast (minimum)
Meet hier gelijk je contrast
De contrastverhouding is: 21:1
2. Ontwerp voor herschalen
Zorg dat je ontwerp goed werkt op smalle schermen van 320 pixels breed.
De regels:
- Tekst blijft leesbaar bij 400% inzoomen
- Tekst loopt niet over elkaar heen
- Alle functionaliteit blijft beschikbaar
- Knoppen en links blijven klikbaar
- Horizontaal scrollen is niet nodig bij schermen van 320 pixels breed
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 minimaal 24 bij 24 CSS-pixels. Mensen met een motorische beperking kunnen moeite hebben met kleine doelen.
Ontwerptips:
- Maak je touch-targets groter dan je visuele elementen
- Gebruik padding om het aanwijsgebied te vergroten
- Groepeer kleine elementen (zoals social media iconen) met ruimte ertussen
- Test zelf met een touchscreen apparaat
Hulpmiddelen voor vormgevers
Contrast controleren:
- Colour Contrast Analyser (CCA):
- Berekent contrastverhouding tussen 2 kleuren
- Kleurcodes of pipet
Lees meer over hulpmiddelen bij het toetsen
Praktische tips
Bediening
- Maak klikbare elementen (zoals knoppen en links) minstens 24 bij 24 CSS-pixels groot.
Ontwerp
- Zorg voor minimaal 4,5:1 contrast tussen tekst en achtergrond.
- Gebruik je grote tekst (minstens 24px of 18.7px 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.
Weergave
- Zorg dat de hele content zichtbaar 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 een vormgever bij betrokken is:
Afbeeldingen
Bediening
- Pauzeren, stoppen, verbergen
- Focus zichtbaar
- Aanwijzergebaren
- Bewegingsactivering
- Sleepbewegingen
- Grootte van het aanwijsgebied (minimum)
Beweging
Formulieren
Media
Navigeren
Ontwerp
- Gebruik van kleur
- Contrast (minimum)
- Contrast van niet-tekstuele content
- Grootte van het aanwijsgebied (minimum)
- Consistente navigatie
- Consistente hulp
Techniek
Tekst
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 praktische oplossingen vinden.