Go to content

WCAG Checklist voor een Designer

In deze checklist hebben we goede adviezen en tips verzameld voor degenen die met het ontwerp van websites en apps werken en ervoor willen zorgen dat uw ontwerp voldoet aan de eisen voor webtoegankelijkheid.

Published

WCAG-checklist voor de designer

In deze checklist hebben we goede adviezen en tips verzameld voor degenen die met het ontwerp van websites en apps werken en ervoor willen zorgen dat uw ontwerp voldoet aan de eisen voor webtoegankelijkheid.

Semantische structuur

  • Zorg ervoor dat al het ontwerp en de inhoud een logische, semantische structuur volgen
  • Merk op dat de leesvolgorde hetzelfde moet zijn als de visuele volgorde op de pagina

Kleuren en contrast

  • Zorg voor voldoende contrast tussen voorgrond en achtergrond
  • De voorgrondtekst moet voldoende contrast hebben met de achtergrondkleuren.
  • Dit omvat tekst op afbeeldingen, achtergrondverlopen, knoppen en andere elementen
  • Vestig geen aandacht op belangrijke informatie of elementen met alleen kleur. Gebruik een combinatie van tekst, kleur of grafische objecten

Tekst en lettertypen

  • Gebruik echte tekst in plaats van grafische tekst, omdat deze kan worden gelezen door schermlezers en veel beter kan worden vergroot
  • Gebruik altijd CSS voor styling
  • Vermijd overmatig gebruik van hoofdletters, aangezien deze moeilijker te lezen zijn, vooral voor schermlezers
  • Let op lettergroottes en gebruik geen kleinere lettergrootte dan 10pt

Lijn lengte

  • Vermijd te lange of te korte regels omdat dit de leesbaarheid vermindert
  • De optimale regellengte voor hoofdtekst is tussen 50-60 tekens

Links

  • Zorg ervoor dat links visueel opvallen op een andere manier dan alleen kleur te gebruiken (bijvoorbeeld door ze te benadrukken)
  • Ontwerpindicatoren waarmee toetsenbordgebruikers gemakkelijk kunnen bepalen of iets een link is
  • Ontwerp een link 'ga door naar inhoud' en maak deze bovenaan alle pagina's toegankelijk
  • Vermijd links met saaie tekst zoals 'klik hier' of 'lees meer'

Animatie, video en audio

  • Vestig in je ontwerp de aandacht op beeld- en mediaalternatieven
  • Werk samen met schrijvers en ontwikkelaars van inhoud om alternatieven te bieden voor niet-tekstuele inhoud
  • Vermijd knipperende animaties en inhoud die automatisch wordt afgespeeld
  • Sta gebruikers toe om animaties te stoppen of audio automatisch af te spelen. Dit geldt voor carrousels, afbeeldingsschuifregelaars, achtergrondaudio en video's

Velden en formulieren

  • Zorg ervoor dat invoervelden en formulieren beschrijvende labels en instructies hebben
  • Toon altijd validatiefouten, foutmeldingen en bied de gebruiker instructies om eventuele fouten te corrigeren
  • Vermijd te veel ruimte tussen labels en velden

Interactieve elementen

  • Maakt het gemakkelijk om interactieve elementen zoals links en knoppen te identificeren
  • U kunt bijvoorbeeld het uiterlijk van koppelingen wijzigen wanneer de muis of het toetsenbord deze selecteert of wanneer u het scherm aanraakt
  • Zorg ervoor dat de stijlen en naamgeving van interactieve elementen consistent worden gebruikt op de hele site

Navigatie

  • Maak het gemakkelijk om op meerdere manieren door de site te navigeren, bijvoorbeeld met zoeken op de website en een sitemap
  • Help gebruikers te begrijpen waar ze zich op de site of pagina bevinden door oriëntatietags zoals broodkruimels en duidelijke koppen te verstrekken
  • Zorg ervoor dat de navigatie over meerdere pagina's consistente naamgeving, stijl en positie heeft
  • Maak een link 'overslaan naar inhoud' en maak deze bovenaan alle pagina's beschikbaar

Hoe kunnen we helpen?

We werken met veel aspecten van webtoegankelijkheid en zijn bekend met alle drie WCAG-niveaus. We kijken holistisch naar het gebied van webtoegankelijkheid om het verband met gebruikerservaring, verkeer en prestaties te begrijpen om uw investering te optimaliseren. Wij bieden:

  • Webtoegankelijkheidsaudits
  • Richtlijnen voor WCAG-compliance
  • Implementatie van webtoegankelijkheid
  • Toegankelijkheidstraining voor sleutelpersoneel (redacteuren, ontwerpers enz.)