WCAG voor vormgevers

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

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:
    • WCAG Color contrast checker voor Firefox
    • WCAG Color contrast checker voor Chrome
    • WCAG Color contrast checker voor Edge
• 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.
• Zorg dat animaties, carrousels en automatisch bewegende content te pauzeren, stoppen of verbergen zijn.
• Bied voor complexe aanwijzergebaren (zoals swipe of pinch) altijd ook een alternatief met een enkele klik of tik.
• Bied voor sleepbewegingen (zoals drag-and-drop) altijd ook een alternatief met een enkele klik of tik.
• Bied voor functies die werken via bewegen, schudden of kantelen van het apparaat altijd ook een alternatief via een bedieningselement. Zorg dat bewegingsactivering uit te schakelen is.

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. Gebruik je het toch? Zorg dat het niet meer dan 3 keer per seconde flitst.

Navigeren

• Houd de positie van navigaties consistent op alle pagina’s.
• Zorg dat de volgorde van menu-items hetzelfde blijft op elke pagina.
• Bied je hulpmechanismen aan (zoals een contactpagina, chatfunctie of veelgestelde vragen)? Plaats ze op elke pagina op dezelfde plek.

Ontwerp

• Gebruik kleur nooit als enige manier om informatie over te brengen. Voeg ook tekst, iconen of patronen toe.
• Zorg voor minimaal 4,5:1 contrastverhouding tussen tekst en achtergrond.
• Gebruik je grote tekst (minstens 24px of 18,5px vetgedrukt)? Zorg dan voor minimaal 3:1 contrastverhouding.
• Zorg dat bedieningselementen (zoals knoppen of invoervelden) minimaal 3:1 contrastverhouding hebben met de achtergrond.
• Zorg dat iconen en pictogrammen die belangrijk zijn voor de content ook minimaal 3:1 contrastverhouding hebben.
• Ontwerp een duidelijk zichtbare focusstijl voor alle bedieningselementen. Gebruik bijvoorbeeld een opvallende rand of achtergrondkleur.

Weergave

• Zorg dat alle content leesbaar en bedienbaar blijft bij 400% zoom.
• Voorkom dat iemand in twee richtingen moet scrollen (horizontaal én verticaal) na het inzoomen.
• Zorg dat tekst tot 200% te vergroten is zonder dat content of functionaliteit verloren gaat.
• Zorg dat je ontwerp zowel in staande als in liggende weergave werkt. Forceer geen vaste weergavestand.

Handige bronnen

• Designing for Web Accessibility | Web Accessibility Initiative (WAI) | W3C (Engelstalig)

Succescriteria

Alle succescriteria waar vormgevers bij betrokken zijn:

Afbeeldingen

• 1.4.11 Contrast van niet-tekstuele content
• 2.3.1 Drie flitsen of beneden drempelwaarde

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

• 2.2.2 Pauzeren, stoppen, verbergen
• 2.3.1 Drie flitsen of beneden drempelwaarde

Formulieren

• 3.3.2 Labels of instructies

Media

• 2.3.1 Drie flitsen of beneden drempelwaarde

Navigeren

• 3.2.3 Consistente navigatie

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

• 1.3.4 Weergavestand

Weergave

• 1.3.4 Weergavestand
• 1.4.4 Herschalen van tekst
• 1.4.10 Reflow

Meer hulp nodig?