Ontwerp

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.

  • 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.

    Let op: Deze contrastverhoudingen mogen niet naar boven worden afgerond. De contrastverhouding tussen de hexadecimale kleurcodes #777777 (grijs) en #FFFFFF (wit) is 4,47:1. Dit is dus niet genoeg.

    Om een contrastverhouding te berekenen kan gebruik worden gemaakt van een contrast-checker. Bijvoorbeeld de contrast checker op de website van WebAIM of de Colour Contrast Analyser (software) van The Paciello Group.

    Er zijn een paar uitzonderingen voor contrast van tekst zoals logo’s, decoratieve tekst en elementen die niet actief zijn.

  • 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.

    Om een contrastverhouding te berekenen kan gebruik worden gemaakt van een contrast-checker. Bijvoorbeeld de contrast checker op de website van WebAIM of de Colour Contrast Analyser (software) van The Paciello Group.

  • 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.

  • 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 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.

    Voorbeeld:
    De tekst op de knop bij een zoekveld is op alle pagina’s ‘zoeken’, en niet op sommige pagina’s ‘vinden’.

Succescriteria

  • Principe 1. Waarneembaar
    • Richtlijn 1.4 Onderscheidbaar
      • 1.4.1 Gebruik van kleur
      • 1.4.3 Contrast (minimum)
      • 1.4.11 Contrast van niet-tekstuele content
  • Principe 2. Bedienbaar
    • Richtlijn 2.4 Navigeerbaar
      • 2.4.7 Focus zichtbaar
  • Principe 3. Begrijpelijk
    • Richtlijn 3.2 Voorspelbaar
      • 3.2.3 Consistente navigatie
      • 3.2.4 Consistente identificatie