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 interactielementen 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

  • Zorg voor voldoende kleurcontrast

    Techniek
    Op websites en apps moet lichte tekst een donkere achtergrond hebben en donkere tekst een lichte achtergrond. Anders is de leesbaarheid onvoldoende voor gebruikers die kleurenblind of slechtziend zijn - en vaak ook voor andere gebruikers. Hoe kun je ervoor zorgen dat je ontwerp voldoende kleurcontrast heeft?
    Abstract schilderij met veel contrasterende kleuren

  • UX-designer? Jij hebt een belangrijke rol in het toegankelijkheidsproces

    Content
    Als user experience designer sta je in dienst van de toekomstige gebruiker van de website of webapplicatie die je schrijft. Hoe wil je dat die gebruiker gaat interacteren? En op welke manier is een gebruiker met een functiebeperking in staat óm te interacteren? In dit stadium is het ontzettend belangrijk dat jij als UX-er het onderwerp Toegankelijkheid al meeneemt in je ontwerp. Sterker nog: als jij het nu niet doet, wie dan wel? 

  • Toegankelijke content? Dit is wat je als webredacteur weten moet

    Content
    Het toegankelijk maken van websites en applicaties voor web en mobiel is niet alleen een kwestie van techniek. Maar ook van inhoud. Hier delen we tips en inzichten waar webredacteuren en andere content creators mee aan de slag kunnen. 
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
4 + 2 =
Los de rekensom op en geef de oplossing aan met cijfers. Bijvoorbeeld voor 'twee plus vier =?' geef een '6' op.
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.