Omslag van 'WCAG in de praktijk'

9. Voer voor vormgevers

Bij de mensen die de vormgeving van websites maken staat toegankelijkheid niet altijd in het vizier. Vaak is het gebrek aan kennis over dit onderwerp. Maar ook vaak ligt het probleem bij de briefing: de organisatie heeft leuke idee├źn, maar vergeet op dat moment de toegankelijkheid. Voorkomen is beter dan genezen, vandaar hieronder een aantal tips voor een toegankelijke vormgeving.

9.1 Kleur van letters

  • Het beste leest zwarte letters op een witte achtergrond (Nielsen, Prioritizing Web Usability). Echt waar. Grijzige teksten zijn een trend, maar maken het lezen slechter. Denk je dat minder contrast beter is, kies dan voor een minder witte achtergrond.
  • Contrast tussen tekst en achtergrond:
    • contrastratio minimaal 4,5 : 1 voor gewone tekst
    • minimaal 3,0 : 1 voor grote tekst
  • Kleur van links: minimale contrastratio 3 : 1 met de omringende tekst.
  • Links moeten behalve in kleur ook afwijken in vorm. Zorg daarom dat de link onderstreept is, eventueel alleen bij mouse-over (maar liever altijd). Nog een tip hierbij: kies in de css voor underlining, niet voor border-bottom.
  • Zet NOOIT tekst op een oneffen achtergrond, zoals tekst op een foto.

9.2 Afbeeldingen van tekst

Een afbeelding van tekst mag niet in WCAG. Dit kun je oplossen door dit te doen met HTML/CSS. Uitzonderingen hierop zijn:

  • Logo's
  • Als de vormgeving van de tekst niet is na te bootsen in HTML/CSS, bijvoorbeeld als het een geschreven tekst is.

9.3 Voorkom narcisme of organisatiegericht denken

  • Uitingen van narcisme zijn: headerfoto's in de headers, carrousels en banners om eigen content te promoten.
  • Probeer de header (logo, eventueel pay-off, menu) zo klein mogelijk te houden, maximaal 120 pixels hoog (liever minder). Gebruik geen fotomateriaal in de header, maar doe dat in het contentvlak.
  • Gebruik NOOIT bewegende content, zoals caroussels. Niet overtuigd? Kijk op shouldiuseacarousel.com.
  • Gebruik geen banners op je eigen site om je eigen content te promoten. Werk daarentegen met microcontent: titel, lead, eventueel foto.
top

Wat vind je van dit hoofdstuk?

Feedback

Contact

Vul dit in als je wil dat we contact met je opnemen.