Vormgeving

De vormgeving van een pagina is essentieel voor de toegankelijkheid. Veel informatie kan worden overbracht met kleur, vorm en locatie maar niet alle bezoekers kunnen de vormgeving webpagina zien. 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 de vormgeving ook toegankelijk is.

  • Tekst met voldoende contrast is voor iedereen goed leesbaar, ook voor bezoekers die kleurenblind of slechtziend zijn. De richtlijnen vereisen een contrastverhouding van ten minste 4,5:1 tussen de kleur van de tekst en de kleur van de achtergrond. Om de contrastverhouding te berekenen kan gebruik worden gemaakt van een contrast-tool. Bijvoorbeeld de tool op https://webaim.org/resources/contrastchecker/.

    Grote tekst is gemakkelijker om te lezen. Voor grote tekst geldt daarom een andere contrasteis. Met ‘grote tekst’ wordt tekst van ten minste 24px (1.5em) bedoeld, of tekst van ten minste 18.5px dikgedrukt (ongeveer 1.2em of 120%). De contrastverhouding voor grote tekst moet ten minste 3:1 zijn.

    Deze contrasteisen gelden ook voor tekst op afbeeldingen.

    Niet voor alle tekst is het nodig om voldoende contrast te gebruiken. Er zijn namelijk een paar uitzonderingen zoals logo’s, tekst die puur decoratief is, tekst op afbeeldingen die puur decoratief zijn en knoppen die niet actief zijn.

    Let op: De genoemde contrastverhoudingen zijn echt een minimum en kunnen niet worden afgerond naar boven. De kleur #777777 (grijs) is een veelgebruikte kleur, deze kleur op #ffffff (wit) heeft een contrastverhouding van 4,47:1. Dit is dus niet voldoende.

  • 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 dragen. Informatie die alleen wordt overgebracht door kleur is niet toegankelijk voor bezoekers met een visuele beperking.

    Bezoekers die kleurenblind, slechtziend of blind zijn kunnen informatie informatie die alleen wordt overgebracht door kleur niet (goed) waarnemen. Zorg dat er naast alleen kleur ook andere manieren worden gebruikt zoals tekst, tekststijlen, iconen of patronen. Gebruik in een grafiek bijvoorbeeld niet alleen per lijn een afwijkende kleur maar ook een icoon op de lijn.

  • Voor de oriëntatie op een pagina is het prettig om de vaste pagina-onderdelen telkens in dezelfde volgorde te tonen. Dit helpt alle bezoekers met het navigeren over de website en het vinden van informatie op een pagina. Het is belangrijk voor de toegankelijkheid van de website dat deze volgorde niet alleen in de vormgeving hetzelfde blijft, maar ook in de broncode.

    Per pagina mogen wel onderdelen worden weggelaten of worden toegevoegd.

  • De focusindicator is belangrijk voor iedereen die met het toetsenbord navigeert. Het laat zien welk onderdeel de toetsenbordfocus heeft. De browser heeft hiervoor een standaard focusindicator maar deze kan ook worden aangepast. Als je deze aanpast, zorg dan voor voldoende contrast. Een contrastverhouding van ten minste 3:1 tussen de kleur van de focusindicator en de kleur van de achtergrond is vereist.

E-mail ons

info@wcag.nl

Bel ons

085 - 80 81 814

Succescriteria

  • Principe 1. Waarneembaar
    • Richtlijn 1.4 Onderscheidbaar
      • 1.4.1 Gebruik van kleur
      • 1.4.11 Contrast van niet-tekstuele content
      • 1.4.3 Contrast (minimum)
  • Principe 3. Begrijpelijk
    • Richtlijn 3.2 Voorspelbaar
      • 3.2.3 Consistente navigatie