het ontwerp van een webpagina is essentieel voor de toegankelijkheid. Veel informatie wordt overbracht met kleur, vorm en locatie maar lang niet alle bezoekers kunnen het ontwerp (goed) waarnemen. Zorg daarom voor genoeg contrast maar ook voor andere manieren om deze informatie over te brengen.
Door aandacht te geven aan deze belangrijke punten zorg je dat het ontwerp ook toegankelijk is.
Gebruik genoeg contrast voor tekst
De kleur van tekst moet genoeg contrast hebben tegen de achtergrond. Zo is de tekst voor alle bezoekers goed leesbaar. Tekst moet een contrastverhouding hebben van minimaal:
- 4,5:1 voor tekst kleiner dan 24px of 19px dikgedrukt.
- 3:1 voor tekst groter dan 24px of 19px dikgedrukt.
Deze contrasteisen gelden ook voor tekst op afbeeldingen.
Er zijn een paar uitzonderingen voor contrast van tekst zoals logo’s, decoratieve tekst en elementen die niet actief zijn.
Zorg voor een duidelijk zichtbare focus indicator
De focus indicator moet duidelijk zichtbaar zijn. De focus indicator laat zien welk onderdeel de
toetsenbordfocus heeft. Dit is dus belangrijk voor iedereen die met het toetsenbord navigeert. Vaak
wordt het weergeven door een zichtbare rand om het element.
Elke browser heeft een standaard focus indicator maar de stijlkenmerken kunnen ook worden aangepast. Als
de stijlkenmerken worden aangepast, zorg dan voor genoeg contrast tussen de kleur van de focus indicator
en de kleur van de achtergrond. De focus indicator moet een contrastverhouding hebben van minimaal 3:1.
Gebruik naast kleur ook andere manieren om informatie over te brengen
Met kleur kan gemakkelijk de aandacht worden getrokken of onderscheid worden gemaakt tussen
verschillende onderdelen. Bijvoorbeeld voor een waarschuwingsbericht op een pagina of verschillende
lijnen in een grafiek. Kleur is handig maar mag niet als enige manier worden gebruikt om informatie over
te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te
onderscheiden. Informatie die alleen wordt overgebracht met kleur kan door bezoekers die kleurenblind of
slechtziend zijn niet (of niet goed) worden waargenomen.
Zorg ook voor andere manieren zoals tekst, tekststijlen, iconen of patronen. Gebruik bijvoorbeeld niet
alleen een groen of rood bolletje maar een groen vinkje en rood kruisje. Of gebruik in een grafiek niet
alleen een afwijkende kleur per lijn maar gebruik een legenda en plaats ook een icoon op de lijn.
Plaats pagina-onderdelen op iedere pagina in een vaste volgorde
Navigatiemenu’s en onderdelen die op meerdere webpagina’s voorkomen, moeten telkens in dezelfde
volgorde worden geplaatst. Zorg dat deze volgorde zowel in de vormgeving als in de code hetzelfde is.
Een consistente navigatie- en paginastructuur maakt het voor iedereen makkelijker om te navigeren door
de website en informatie op een pagina te vinden. Ook bezoekers die gebruik maken van schermlezers
kunnen hierdoor sneller en efficiënter hun weg vinden.
Zorg dat herhalende componenten met dezelfde functie telkens hetzelfde worden benoemd
Zorg dat componenten die dezelfde functionaliteit hebben op de hele website hetzelfde worden benoemd. Zo kunnen bezoekers herhalende onderdelen makkelijk terug vinden. Het gaat dan bijvoorbeeld om:
- teksten op knoppen;
- labels bij invoervelden;
- linkteksten;
- alternatieve teksten van iconen die dezelfde functie hebben.
Door onderdelen op een consistente manier te benoemen kunnen bezoekers die gebruik maken van schermlezers sneller en efficiënter hun weg vinden.