De vier principes van WCAG in gewone taal

Wie voor het eerst de WCAG-richtlijnen opent, schrikt meestal. Tientallen succescriteria met nummers als 1.4.11 en 2.5.8, in technisch Engels. Het voelt als een wetboek. Maar onder al die criteria liggen vier eenvoudige vragen, en die zijn voor iedereen te begrijpen. Die vier WCAG-principes zijn: waarneembaar, bedienbaar, begrijpelijk en robuust. In het Engels vormen ze samen het geheugensteuntje POUR.

Elk succescriterium hoort bij een van deze vier principes. Begrijpt u het principe, dan begrijpt u waarom een criterium bestaat. En dan herkent u ook problemen waar geen tool u op wijst.

1. Waarneembaar: kan iedereen het zien of horen?

Informatie moet op een manier worden aangeboden die mensen kunnen waarnemen. Niet iedereen ziet, en niet iedereen hoort. Dus heeft informatie die alleen via één zintuig binnenkomt, een alternatief nodig.

Voorbeelden van wat er misgaat:

• Een productfoto zonder alt-tekst. Voor een blinde bezoeker met een schermlezer is het een leeg gat.
• Een instructievideo zonder ondertiteling. Een dove bezoeker mist alles wat er gezegd wordt.
• Lichtgrijze tekst op een witte achtergrond. Iemand die slecht ziet, of iemand die buiten in de zon op zijn telefoon kijkt, kan het niet lezen. WCAG vraagt een contrastverhouding van 4,5:1 voor normale tekst en 3:1 voor grote tekst.
• Een formulierveld dat rood kleurt bij een fout, zonder tekst erbij. Wie kleurenblind is, ziet niet wat er mis is.
• Een pagina die bij 400 procent zoom zijwaarts gaat scrollen of waar tekst over elkaar valt.

De vraag die u zich bij dit principe stelt: als iemand één zintuig niet kan gebruiken, komt de informatie dan nog aan?

2. Bedienbaar: kan iedereen het gebruiken?

Onderdelen van de site moeten te bedienen zijn, ook door mensen die geen muis gebruiken. Denk aan blinde gebruikers, maar ook aan mensen met een motorische beperking die met het toetsenbord, een schakelaar of spraakbesturing werken.

Voorbeelden:

• Een uitklapmenu dat alleen opent als u er met de muis overheen gaat. Met de Tab-toets komt u er niet in.
• Een focuskader dat is weggehaald omdat het “lelijk” was. Toetsenbordgebruikers zien niet meer waar ze zijn. Zie zichtbare focus op uw website.
• Een pop-up waar u met het toetsenbord niet meer uitkomt.
• Knopjes op mobiel die zo klein en dicht op elkaar staan dat u steeds de verkeerde raakt. WCAG 2.2 vraagt een doelgrootte van minstens 24 bij 24 CSS-pixels, of genoeg ruimte eromheen.
• Een sessie die na vijf minuten verloopt terwijl iemand nog bezig is met invullen.
• Geen manier om het lange menu over te slaan, zodat iemand op elke pagina dertig keer moet tabben.

De vraag bij dit principe: kan iemand alles doen zonder muis, zonder haast en zonder precieze handbewegingen?

3. Begrijpelijk: snapt iedereen wat er staat en gebeurt?

Informatie en bediening moeten begrijpelijk zijn. Het gaat hier om twee dingen: de tekst zelf, en het gedrag van de site.

Voorbeelden:

• Een foutmelding die “Ongeldige invoer” zegt, zonder te vertellen wat er mis is of hoe het goed moet.
• Een formulier dat automatisch verstuurt zodra u een keuze maakt in een uitklaplijst.
• Een menu dat op elke pagina in een andere volgorde staat.
• Een pagina waarvan de taal niet goed is ingesteld, zodat een schermlezer Nederlands met een Engelse uitspraak voorleest.
• Teksten vol vakjargon die de bezoeker niet kent.

De vraag bij dit principe: weet de bezoeker steeds wat hij leest, wat er gaat gebeuren en wat hij moet doen als het misgaat?

4. Robuust: werkt het met de hulpmiddelen van de bezoeker?

Dit is het meest technische principe. Content moet zo zijn gebouwd dat verschillende browsers en hulpmiddelen, zoals schermlezers en spraakbesturing, het goed kunnen uitlezen. Ook nu, en ook als die hulpmiddelen verder ontwikkelen.

In de praktijk gaat het vooral over de vraag of elementen een juiste naam, rol en status hebben. Voorbeelden:

• Een “knop” die eigenlijk een <div> is met een klikfunctie. Een schermlezer weet niet dat het een knop is. Zie ook knop of link.
• Een uitklapblok dat niet doorgeeft of het open of dicht is.
• Een melding als “Product toegevoegd aan winkelmand” die alleen zichtbaar verschijnt, en niet wordt voorgelezen.
• Een icoonknop zonder tekst en zonder label, die door een schermlezer wordt aangekondigd als “knop”, meer niet.

De vraag bij dit principe: vertelt de code aan hulpmiddelen wat elk onderdeel is en wat het doet?

Hoe de WCAG-principes, richtlijnen en criteria samenhangen

WCAG is opgebouwd in lagen:

Laag	Aantal	Voorbeeld
Principes	4	Waarneembaar
Richtlijnen	13 in WCAG 2.2	Onderscheidbaar: maak het makkelijker om content te zien en te horen
Succescriteria	Tientallen, met niveau A, AA of AAA	1.4.3 Contrast (minimum), niveau AA

De succescriteria zijn toetsbaar: daar wordt een site in een audit op beoordeeld. Voor de wet in Nederland gaat het om niveau AA, dat wil zeggen alle criteria van niveau A en AA. Wat dat inhoudt, staat op de pagina WCAG niveau AA in begrijpelijke taal.

Zelf de vier principes toepassen

U kunt met deze vier vragen al een eerste ronde over uw eigen site doen. Neem uw belangrijkste pagina, bijvoorbeeld een productpagina of het contactformulier:

1. Waarneembaar: zoom in tot 400 procent. Kunt u alles nog lezen? Zijn er afbeeldingen die informatie geven zonder dat de tekst het zegt?
2. Bedienbaar: leg de muis weg en gebruik alleen Tab, Enter en de spatiebalk. Komt u overal? Ziet u steeds waar u bent?
3. Begrijpelijk: vul het formulier verkeerd in. Snapt u de foutmelding?
4. Robuust: dit is lastiger zonder hulpmiddel. Zet de schermlezer van uw computer of telefoon aan en luister of knoppen een begrijpelijke naam hebben.

Dat vervangt geen volledige toets, maar u leert er meer van dan van een automatische scan. Het complete beeld van wat een toegankelijke site vraagt, staat in website toegankelijk maken.