Omslag van 'WCAG in de praktijk'

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

Via de Wet digitale overheid zijn overheden in Nederland verplicht om hun websites en apps toegankelijk te maken. Voor niet-overheden geldt de Wet gelijke behandeling op grond van handicap of chronische ziekte (Wgbh/cz).

Beide wetten verwijzen als norm naar WCAG 2.1 niveau AA (daarover later meer).

WCAG is opgebouwd uit:

  • 4 principes
  • 12 richtlijnen
  • 50 succescriteria op niveau A en AA
  • 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 12 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.

Technieken

Onder de succescriteria hangen weer technieken. Met deze technieken kun je beoordelen of je voldoet. 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. De principes, richtlijnen en succescriteria zijn onveranderlijk.

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.

Doof-blinden 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 omgezet te worden, maar helpt het 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.

Ook hier is de redenering weer analoog aan de zintuigen. 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 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 met een recente versie van Internet Explorer
  • NVDA, NonVisual Desktop Access, is een gratis reader, die alleen werkt op Windows en dan nog het liefst met Firefox.
  • Voiceover: zit standaard op de Apple-computers en werkt alleen met Safari.

2.8 Toevoegingen WCAG 2.1 niveau A en AA

Waarneembaar

  1. 1.3.4 Orientation (AA)
  2. 1.3.5 Identify Input Purpose (AA)
  3. 1.4.10 Reflow (AA)
  4. 1.4.11 Non-Text Contrast (AA)
  5. 1.4.12 Text Spacing (AA
  6. 1.4.13 Content on Hover or Focus (AA)

Bedienbaar

  1. 2.1.4 Character Key Shortcuts (A)
  2. 2.5.1 Pointer Gestures (A)
  3. 2.5.2 Pointer Cancellation (A)
  4. 2.5.3 Label in Name (A)
  5. 2.5.4 Motion Actuation (A)

Robuust

  1. 4.1.4 Status Changes (AA)

2.9 Mogelijke toevoeging WCAG 2.2

Er is al een concept voor WCAG 2.2 en daarin is 1 criterium voorgesteld: 2.4.11 Focus Visible (Enhanced).

De omschrijving is:

When a User Interface Component displays a visible keyboard focus, all of the following are true:

  • Minimum area: The focus indication area is greater than or equal to the longest side of the bounding rectangle of the focused control, times 2 CSS pixels.
  • Focus contrast: Color changes used to indicate focus have at least a 3:1 contrast ratio with the colors changed from the unfocused control.
  • Contrast or thickness: The focus indication area has a 3:1 contrast ratio against all adjacent colors for the minimum area or greater, or has a thickness of at least 2 CSS pixels.

A focus indicator that is larger than the minimum area may have parts that do not meet the 3:1 contrast ratio, as long as an area equal to the minimum does meet the contrast ratio.

top

Wat vind je van dit hoofdstuk?

Feedback

Contact

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