Omslag van 'WCAG in de praktijk'

2. WCAG: richtlijnen voor een toegankelijke website

Digitale toegankelijkheid gaat over de bruikbaarheid van digitale content voor mensen die op een of andere manier beperkt zijn in het gebruik hiervan. De richtlijnen hiervoor zijn de Web Content Accessibility Guidelines (WCAG).

2.1 Opbouw WCAG 2.1

De internationale richtlijnen voor webtoegankelijkheid zijn de Web Content Accessibility Guidelines (WCAG), versie 2.1.

Tot in 2016 hanteerde Nederland de Webrichtlijnen. Dat was ook al WCAG, maar dan aangevuld met het Principe Universeel. Dit principe is dus komen te vervallen.

WCAG is opgebouwd uit:

  • 4 principes
  • 13 richtlijnen
  • 78 succescriteria: 50 op niveau A en AA, 28 op niveau AAA
  • een groot aantal technieken

De principes, richtlijnen en succescriteria staan vast en veranderen niet, behalve bij een nieuwe versie van WCAG. We noemen dit deel normatief: het is de norm.

De technieken veranderen: er komen technieken bij en er kunnen technieken afvallen. De technieken noemen we het informatieve deel.

Het toetsen van een pagina gebeurt met de succescriteria.

Principes

WCAG bevat 4 principes:

  • Waarneembaar (Perceivable)
  • Bedienbaar (Operable)
  • Begrijpelijk (Understandable)
  • Robuust (Robust)

In het Engels zijn ze af te korten tot het acroniem (en ezelsbruggetje) POUR.

Richtlijnen

De principes bestaan uit 13 richtlijnen.

Voorbeeld van een richtlijn:

Richtlijn 2.1 Toetsenbordtoegankelijk: Maak alle functionaliteit beschikbaar vanaf een toetsenbord

Succescriteria

De richtlijnen omvatten succescriteria, ingedeeld in 3 niveaus: A, AA en AAA. Criteria van niveau A zijn het eenvoudigst en het belangrijkst om aan te voldoen, niveau AAA is het meest complex. Op niveau A en AA zijn 50 criteria. Deze succescriteria staan centraal bij het toetsen van je website en staan ook centraal in dit e-book.

Het toetsen van een website gebeurt op basis van de succescriteria.

Voorbeeld van een succescriterium

2.1.1 Toetsenbord: Alle functionaliteit van de content is bedienbaar via een toetsenbordinterface zonder dat afzonderlijke toetsaanslagen aan tijd gebonden zijn, behalve als de onderliggende functie een invoer vereist die afhangt van het pad dat de gebruiker aflegt en niet alleen van de eindpunten. (Niveau A)

Helaas is de leesbaarheid van de succescriteria bijzonder slecht, zoals je wellicht hierboven al gemerkt hebt. We zullen je daarom niet te veel lastig vallen met de volledige omschrijvingen van de succescriteria.

In Nederland geldt voor overheden de verplichting dat websites voldoen aan niveau A en AA. De criteria van niveau AAA zijn soms zeker zinvol om na te streven, maar volledig voldoen aan niveau AAA is bijna niet haalbaar. Zelfs het W3C zelf – uitgever van WCAG – adviseert om niveau AAA niet na te streven.

Een overzicht van alle succescriteria vind je in het hoofdstuk Alle succescriteria niveau A en AA.

Technieken

Met de technieken kun je beoordelen of je voldoet aan de succescriteria. Er zijn 3 soorten technieken:

  • Afdoende techniek: gebruik je deze techniek, dan voldoe je aan het succescriterium.
  • Aanbevolen techniek: met deze techniek vergroot je vaak wel de toegankelijkheid, maar gebruik alleen is niet afdoende
  • Gangbare fouten (failures): dit is een techniek die fout is en zorgt dat je niet aan het succescriterium voldoet.

Voorbeeld van een afdoende techniek

H91: Using HTML form controls and links

De technieken zijn genummerd en voor het nummer staan een of meerdere letters:

  • G: General: een algemene techniek
  • H: HTML-techniek
  • PDF: PDF-techniek
  • FLASH: Flash-techniek

Het aantal technieken is wisselend, want er komen technieken bij en er vallen technieken af. De technieken zijn het dynamische deel van WCAG.

Zo, dat is in een notendop hoe WCAG in elkaar zit.

2.2 Waarneembaar

Het 1e principe van WCAG is waarneembaar. Voor het waarnemen van digitale informatie gebruiken we 3 zintuigen: ogen, oren en tast (voor onder andere braille).

Als iemand informatie niet kan zien, dan kan hij deze mogelijk wel waarnemen als de informatie is omgezet naar hoorbare of voelbare informatie.

Voorbeeld: blind

Een afbeelding is niet zichtbaar voor iemand die blind is (zie schema hieronder). Je kunt deze afbeelding voorzien van alternatieve tekst (1). Deze kan voor hen worden opgelezen (2) of worden uitgevoerd op een braille-leesregel (3) . De informatie gaat dus van visueel eerst naar tekst en vanuit tekst weer naar auditief en tactiel. Bij video kan informatie die zichtbaar is ook worden toegevoegd als spraak (audiodescriptie) (4).

Het extra voordeel van het omzetten van visuele informatie naar tekst is dat zoekmachines de content zo ook kunnen indexeren.

Voorbeeld: doof

Iemand die doof is kan bijvoorbeeld de spraak bij een video niet horen (zie afbeelding hieronder). Zij hebben dus ondertiteling nodig. Dat kan door in een speciaal tekstbestand de tekst op te slaan (1). Deze wordt dan als ondertiteling bij de video getoond (2). Dat zijn closed captions. Deze ondertiteling kan ook worden uitgevoerd naar een braille-leesregel (3) en deze is ook beschikbaar voor zoekmachines. Ook kan de ondertiteling in de video worden gebrand (4); de tekst is dan niet als losse tekst beschikbaar en ook niet indexeerbaar door zoekmachines.

Mensen die doof én blind zijn krijgen de tekst als braille of via gebarentaal. Zij voelen de gebaren in de handen van de ander (zie afbeelding hieronder).

Er is ook een grote groep mensen die slechtziend of slechthorend is. Voor hen hoeft de informatie niet altijd omgezet te worden, maar het helpt hen als het zien of horen makkelijker gemaakt wordt. Bijvoorbeeld door te zorgen voor voldoende contrast tussen tekst en achtergrond. Of voor voldoende verschil tussen voorgrondgeluid en achtergrondgeluid in een video.

2.3 Bedienbaar

Het 2e principe van WCAG is dat content bedienbaar moet zijn. De hulpmiddelen hiervoor zijn het toetsenbord en de muis. En tegenwoordig nog het aanraakscherm (touchscreen), maar dit is in deze context vergelijkbaar met de muis.

Mensen die de muis niet kunnen gebruiken, zijn aangewezen op het toetsenbord. Alles moet dus werken met het toetsenbord. Andersom zijn er mensen die geen of moeilijk een toetsenbord kunnen gebruiken, zoals mensen met een hoge dwarslaesie. Voor hen is het weer belangrijk dat alles met de muis werkt.

Voorbeeld

Mensen die de muis niet kunnen gebruiken, navigeren met het toetsenbord. Daarvoor is het nodig dat zichtbaar is in de site waar je met het tabben bent. Dit is zichtbaar met de zogenaamde focus rectangle: een kader om de plek waar je bent met de tab. Deze focus rectangle moet dus altijd zichtbaar zijn.

2.4 Begrijpelijk

Het 3e principe is begrijpelijk. In dit principe zitten criteria die gaan over begrijpelijke taal, maar ook over bruikbaarheid. Bijvoorbeeld het moet duidelijk zijn in welke taal een tekst wordt aangeboden, want dit is belangrijk wanneer de tekst wordt omgezet naar spraak.

Voorbeeld

Het moet duidelijk zijn in welke taal een pagina is geschreven. Dan weten screenreaders en zoekmachines welke taal ze moeten gebruiken. Om de taal aan te geven gebruik je het lang-attribuut met de waarde 'nl' in het html-element:

2.5 Robuust

Bij robuust, het 4e principe, gaat het erom dat browsers en andere lezers van de html-code op een juiste manier de code interpreteren. Als er bijvoorbeeld <h1> in de code staat, dan moet de browser weten dat hij hiervan een kop 1 moet maken.

Html kun je zien als een taal. Html heeft ook een grammatica. Nu is het van belang dat websites zich houden aan deze grammaticale regels. Alleen dan heb je enige garantie dat je content ook goed wordt gepresenteerd.

Het principe Robuust stelt vrij milde eisen. Html hoeft niet foutloos te zijn, maar in de basis moet deze wel goed omgezet kunnen worden door een browser.

Het principe Robuust eist bijvoorbeeld dat html-code altijd goed genest moet zijn.

Voorbeeld

Onjuiste nestingJuiste nesting
<head>
<body>
</head>
</body>
<head>
</head>
<body>
</body>

2.6 Zelf toetsen

Er zijn online veel toetsen waarmee je vrij eenvoudig veel richtlijnen kunt toetsen. We hebben deze beschreven in ons e-book Webtechniek voor niet-techneuten.

2.7 Zelf testen met een screenreader

Blinden en ernstig slechtzienden kunnen geen beeldscherm gebruiken. Zij hebben dus iets anders nodig om de informatie van een webpagina te krijgen. Zij gebruiken daarvoor een schermlezer (schermleesprogramma) of screenreader, zoals Jaws, VoiceOver of NVDA.

Met een screenreader wordt de tekst van een website uitgevoerd als spraak of braille. De uitvoer in braille gaat via een brailleleesregel.

Brailleleesregel

Om een idee te krijgen van de toegankelijkheid van je tekst kun je een screenreader downloaden. Even een waarschuwing: het gebruik is nogal complex en zeker de 1e keren frustrerend. Neem er even de tijd voor om het te leren (een dagdeel) of vraag iemand die werkt met screenreaders om uitleg (zeker een paar uur ...).

De volgende screenreaders kun je gebruiken:

  • JAWS, Job Access With Speech, is een betaald programma, maar kun je in een probeerversie 40 minuten gebruiken. Daarna moet je de computer herstarten voor een volgende 40 minuten. JAWS werkt alleen op Windows.
  • NVDA, NonVisual Desktop Access, is een gratis reader, die ook alleen werkt op Windows.
  • Voiceover: zit standaard op de Apple-computers.
top

Wat vind je van dit hoofdstuk?

Feedback

Contact

Vul dit in als je wil dat we contact met je opnemen.