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

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

WCAG is opgebouwd uit:

4 principes
13 richtlijnen
81 succescriteria: 55 op niveau A en AA, 31 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 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, aa en aaa.

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 Techniques: algemene technieken
F: Common Failures: veel voorkomende fouten
H: HTML-technieken
C: CSS-technieken
ARIA: ARIA-technieken
SCR: Client Side Script
SVR: Server-Side Script Techniques
SL: Silverlight Techniques
SM: SMIL Techniques
PDF: PDF-techniek
FLASH: Flash-techniek
T: Plain-Text Techniques

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.

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 webpagina of document is geschreven, want dit is nodig wanneer de tekst wordt omgezet naar spraak.

Om de taal van een webpagina aan te geven gebruik je het lang-attribuut met de waarde 'nl' in het html-element:

<html lang="nl">

In een pdf selecteer je de juiste taal in de eigenschappen van het document.

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 nesting	Juiste 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. Meer daarover in hoofdstuk onderzoeken van je website op toegankelijkheid.

2.7 Authoring Tool Accessibility Guidelines (ATAG)

Er is nog een andere set van richtlijnen, de Authoring Tool Accessibility Guidelines (ATAG) 2.0.

ATAG richt zich op de tools waarmee mensen content op het web kunnen publiceren. Het gaat daarbij in de 1e plaats om Content Management Systemen, zoals Drupal, Typo3, ModX en WordPress. Maar eigenlijk gaat het om elke tool waarmee mensen iets op het web kunnen publiceren. Dus ook om Google Drive, Sharepoint of social media.

Deze richtlijnen gaan over 2 onderwerpen:

Toegankelijke werking van het CMS, namelijk dat het voldoet aan WCAG.
Ondersteuning bij het maken van toegankelijke webcontent, zoals gebruikers helpen bij het maken van toegankelijke tabellen.

ATAG is nog vrij onbekend en veel ontwikkelaars en beheerders van CMS-en kennen het niet.

2.8 Nieuwe succescriteria in WCAG 2.2

Met smart wacht de toegankelijkheidswereld al een tijdje op de nieuwe versie van WCAG, versie 2.2. Het lijkt erop dat deze er in 2023 dan eindelijk gaat komen.

Met WCAG 2.2 richt het W3C zich op 3 doelgroepen:

Mensen met een cognitieve, taal- en/of leerbeperking
Mensen met verminderd zicht
Gebruikers van mobiele toepassingen

De wijzigingen zijn:

2 nieuwe succescriteria op niveau A
5 nieuwe succescriteria op niveau AA
2 nieuwe succescriteria op niveau AAA
1 wijziging: succescriterium 2.4.7 ‘Focus zichtbaar’ wijzigt van niveau AA naar niveau A.

De nieuwe criteria zijn:

2.4.11 Focus Appearance (Minimum) (AA)
2.4.13 Focus Not Obscured (Minimum) (AA)
2.4.13 Focus Not Obscured (Enhanced) (AAA)
2.5.7 Dragging Movements (AA)
2.5.8 Target Size (Minimum) (AA)
3.2.6 Consistent Help (A)
3.3.7 Accessible Authentication (AA)
3.3.8 Accessible Authentication (No Exceptions) (AAA)
3.3.8 Redundant Entry (A)

Opmerking: WCAG is nog niet vertaald naar het Nederlands en daarom zijn de criteria nog in het Engels.

Het is mogelijk dat er nog wijzigingen komen in deze zogenaamde 'working draft'.