Pas deze tips toe voor een toegankelijke vormgeving van je website

Kennis
Laptopscherm met verschillende vormgevingen

Voor een toegankelijke website of applicatie is het belangrijk dat je een aantal dingen in de vormgeving meeneemt. Bijvoorbeeld een helder kleurcontrast, duidelijke interactie-elementen en heldere teksten. 

Zo maak je je vormgeving toegankelijk voor iedereen

In de vormgeving van een website of webapplicatie valt een wereld te winnen als het gaat om toegankelijkheid. Mensen zonder specifieke functiebeperking realiseren zich vaak niet waar iemand met een visuele of fysieke beperking tegenaan loopt. Daarom delen we hier een aantal tips die veelal gebaseerd zijn op de toegankelijkheidsstandaard WCAG 2.1.  Meer verdieping op de verschillende onderdelen, zoals contrast of content, vind je via de blokken onderaan dit artikel.

Algemene tips voor een toegankelijke vormgeving

  • Zorg voor een goed contrast tussen de voorgrond en de achtergrondkleur
  • Zorg voor overzichtelijke pagina’s - dus niet teveel informatie op een pagina
  • Zorg voor een consistente pagina layout
  • Zorg voor een logische en consistente navigatie
  • Gebruik in de navigatie niet alleen kleur maar ook bijvoorbeeld tekst

Teksten

  • Bevat de pagina veel tekst? Zorg ervoor dat de tekst zwart is en de achtergrond wit  
  • Zorg voor een groot font, lettergrootte 16pt
  • Gebruik geen woorden in kapitalen, geen caps lock
  • Zet niet te veel woorden of karakters op één regel - maximaal zo'n 80 karakters
  • Zorg voor voldoende witruimte tussen de regels en alinea’s
  • Zet liever geen tekst in foto’s. Toch nodig? Plaats er dan een kleurkader achter  in verband met het contrast

Knoppen en velden

  • Maak de knoppen en velden groot genoeg, ongeveer 40px hoog, met voldoende ruimte eromheen zodat ze goed te bedienen zijn
  • Geef knoppen een contrasterende kleur die klopt met de functie. Dus groen staat voor 'goed' of 'akkoord', rood staat voor 'fout'. 
  • Geef met contrasterende tekst in de knop aan wat de knop doet zodra je hem bedient. Bijvoorbeeld 'klik voor akkoord'.

Tags

  • begrijpelijke teksten
  • contrastknop
  • tekstueel alternatief
  • vormgeving
  • website

Zie ook

Portret Anouk Butterlin

Ook aan de slag met digitale communicatie die voor iedereen toegankelijk is?

Wij helpen je op weg. Zodat je zelf aan de slag kunt gaan binnen jouw organisatie. Als je wilt ondersteunen we je ook met advies, realisatie, trainingen en audits. Wil je hier contact over hebben? Bel of e-mail ons, of laat een bericht achter.

Anouk Butterlin

Projectleider
030-239 8270
CAPTCHA
8 + 6 =
Los de rekensom op en geef de oplossing aan met cijfers. Bijvoorbeeld voor 'twee plus vier=?' geef je een '6' op. Let op: je moet de rekensom twee keer invullen. Je krijgt een foutmelding na de eerste rekensom, ook als je die correct hebt ingevuld. Dus vul de rekensom twee keer in om het formulier naar ons te kunnen versturen.
Deze vraag is om te controleren dat u een mens bent, om geautomatiseerde invoer (spam) te voorkomen.
Privacy policy
Accessibility.nl respecteert de privacy van alle gebruikers van haar site en draagt er zorg voor dat de persoonlijke informatie die u ons verschaft vertrouwelijk wordt behandeld. Wij zullen deze gegevens uitsluitend gebruiken met uw toestemming. Accessibility.nl zal uw persoonlijke gegevens niet aan derden verkopen. Voor meer informatie zie ons volledig beleid.