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

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 toegankelijkheid
030-239 8270
Helaas is ons contactformulier tijdelijk niet te gebruiken. We zijn wel te bereiken via info@accessibility.nl en 030 - 239 82 70.