WCAG uitgelegd

De Web Content Accessibility Guidelines, kortweg WCAG, zijn als richtlijnen opgesteld om te kunnen beoordelen of een website of applicatie bruikbaar is voor mensen met een functiebeperking. Ze zijn op zo'n manier opgesteld dat ze niet afhankelijk zijn van een bepaalde oplossing of techniek, maar breed inzetbaar zijn. 

Het is een groot technisch document met bewust brede bewoording om die algemene toepasbaarheid niet af te kaderen. Het is best tegenstrijdig dat hierdoor de succescriteria in de WCAG zelf niet erg toegankelijk zijn om te lezen.

Om je hierbij te helpen en bij de verschillende succescriteria meer inzicht te krijgen in wat er bedoeld wordt, vindt je op deze pagina's verdere uitwerkingen met voorbeelden.

Wat is de WCAG?

In de Web Content Accessibility Guidelines (WCAG) 2.1 wordt uitgelegd hoe websites en apps toegankelijk kunnen worden gemaakt voor gebruikers. De richtlijnen zijn geschreven door toegankelijkheidsspecialisten, vrijwilligers en mensen met een beperking en geplubiceerd door het World Wide Web Consortium (W3C).

De huidige versie, versie 2.1 is tot stand gekomen om beter tegemoet te komen aan de behoeften van mobiele gebruikers, slechtziende gebruikers, en gebruikers met cognitieve beperking of leerproblemen.

De WCAG helpt websites, documenten en mobiele apps toegankelijk te maken voor mensen met:

• Visuele beperkingen; hieronder vallen onder andere mensen die blind of slechtziend zijn en mensen met aandoeningen zoals kleurenblindheid.
• Gehoorproblemen; bijvoorbeeld doven die gebarentaal gebruiken en slechthorenden.
• Motorische beperkingen; waaronder mensen met bewegingsbeperkingen waardoor ze geen muis of toetsenbord kunnen gebruiken, of moeite hebben deze te bedienen.
• Cognitieve beperkingen, zoals dyslectici, mensen met neurodiversiteit zoals het autistisch spectrum en mensen met leermoeilijkheden.

De WCAG helpt ons ook na te denken over de verschillende manieren waarop mensen het web gebruiken:

• Door de manier waarop een website er in hun browser uitziet te veranderen.
• Door alleen een toetsenbord te gebruiken in plaats van een muis.
• Door een schermlezer te gebruiken om te navigeren en de inhoud als spraak of via een brailleleesregel weer te geven.
• Door een schermvergroter te gebruiken om alles op het scherm groter te maken.
• Door spraakherkenning te gebruiken om het web te gebruiken via spraakopdrachten en voor het dicteren van tekst.

De opbouw van de WCAG

De WCAG bestaat uit twaalf richtlijnen, onderverdeeld over vier principes. Deze principes stellen het volgende. Inhoud is:

• Waarneembaar
• Bedienbaar
• Begrijpelijk
• Robuust

Deze principes zijn het uitgangspunt voor 12 richtlijnen en omvatten onderwerpen als alternatieve formaten en manieren, bediening via het toetsenbord, de leesbaarheid van de inhoud en correcte werking op verschillende apparaten.

Elke richtlijn heeft een aantal meetbare normen, zogenaamde succescriteria (SC) en elk criterium valt onder een niveau: A, AA of AAA. De niveaus zijn oplopend en bevatten ook alle SC uit het eerdere niveau. Niveau AA omvat dus de SC die horen bij niveau A en AA.

Deze niveaus geven een aanwijzing van de ernst en mogelijkheid om ze toe te passen. Niveau A kan gezien worden als minimaal basisniveau om inhoud voor een brede groep mensen beschikbaar te stellen. Bij voldoen aan Niveau AA is inhoud voor de overgrote deel van de mensen te gebruiken. Niveau AAA geeft nog verder gaande normen voor specifieke situaties of sluit eerdere uitzonderingen of alternatieven uit.

WCAG in de wetgeving

De WCAG is onderdeel van de Europese norm EN 301 549 waarop de in Nederland geldende wetgeving rond digitale toegankelijkheid is gemaakt. Om hier meer over te lezen kun je terecht op de pagina Wetgeving rond digitale toegankelijkheid.

WCAG 2.1 overzicht in begrijpelijk Nederlands

Hier volgt een korte en vereenvoudigde beschrijving van de principes, richtlijnen en succescriteria uit de WCAG op de niveaus A + AA. 

Onderstaande tekst bevat de succescriteria zoals deze in versie 2.1 aanwezig zijn. Versie 2.2 is in ontwikkeling en bevat enkele nieuwe succescriteria. Voor meer informatie daarover kun je terecht op de pagina WCAG 2.2 Welke toevoegingen komen eraan. 

Principe 1: Waarneembaar

Je moet informatie presenteren op een manier die herkenbaar en bruikbaar is voor mensen, zonder dat ze afhankelijk zijn van een bepaalde manier om deze informatie tot zich te nemen (bijvoorbeeld door aanraking, geluid of zicht).

Richtlijn 1.1: Bied tekstalternatieven

• 1.1.1: Zorg ervoor dat een beschrijving in tekst is van afbeeldingen, en zorg ervoor dat deze beschrijving hetzelfde doel dient als de afbeelding.

Richtlijn 1.2: Bied alternatieven voor tijdgebonden media

• 1.2.1: Geef een beschrijving in tekst voor video zonder geluid, of een transcript voor geluidsfragmenten zonder video, en zorg ervoor dat de beschrijving en het transcript hetzelfde doel dienen als de oorspronkelijke inhoud.
• 1.2.2: Zorg voor ondertiteling bij video's met geluid, en zorg ervoor dat de ondertiteling alle dialogen en belangrijke geluidseffecten bevat.
• 1.2.3: Zorg voor een tekstbeschrijving of een transcript voor video met geluid, en zorg ervoor dat de beschrijving of het transcript hetzelfde doel dient als de oorspronkelijke inhoud.
• 1.2.4: Zorg voor ondertiteling bij live video met geluid, en zorg ervoor dat de ondertiteling alle dialogen en belangrijke geluidseffecten bevat.
• 1.2.5: Zorg voor audiobeschrijving van video's en zorg ervoor dat de beschrijving alle belangrijke activiteiten op het scherm bevat.

Richtlijn 1.3: Maak inhoud die op verschillende manieren kan worden weergegeven

• 1.3.1: Gebruik elementen als koppen, lijsten en tabellen om de structuur van de inhoud goed over te brengen.
• 1.3.2: Zorg ervoor dat content altijd in een logische volgorde gelezen kan worden, zelfs als stylesheets zijn uitgeschakeld.
• 1.3.3: Gebruik geen kleur, grootte, vorm, geluid of locatie als de enige manier om instructies over te brengen.
• 1.3.4: Zorg ervoor dat de weergave van pagina's niet vergrendeld is op alleen horizontale of alleen verticale weergaven, behalve als dit noodzakelijk is.
• 1.3.5: Voeg bij formulieren die informatie over de gebruiker verzamelen HTML autocomplete attributen toe om het doel van de invoer aan te geven.

Richtlijn 1.4: Maak inhoud gemakkelijk voor mensen om te zien en te horen

• 1.4.1: Gebruik kleur niet als de enige manier om informatie over te brengen.
• 1.4.2: Geef mensen een manier om audio te stoppen als het automatisch wordt afspeelt en langer dan drie seconden duurt, of geef ze een manier om het volume te veranderen zonder hun systeeminstellingen te wijzigen.
• 1.4.3: Zorg ervoor dat de kleur van tekst duidelijk afsteekt tegen de achtergrondkleur.
• 1.4.4: Zorg ervoor dat het mogelijk is om alle taken goed uit te voeren wanneer tekst in de browser tot 200% wordt vergroot.
• 1.4.5: Gebruik voor de opmaak van tekst geen afbeeldingen.
• 1.4.10: Zorg ervoor dat content terugvloeit naar een enkele kolom wanneer er wordt ingezoomd en dat er niet in beide richtingen gescrold moet worden om de content te gebruiken.
• 1.4.11: Zorg ervoor dat gebruikers met een visuele beperking belangrijke bedieningselementen kunnen zien en afbeeldingen kunnen begrijpen.
• 1.4.12: Zorg ervoor dat gebruikers eigenschappen van teksten kunnen aanpassen zoals de regelhoogte en de afstand tussen letters en woorden.
• 1.4.13: Zorg voor een manier voor mensen om te kunnen werken met 'extra' inhoud die zichtbaar wordt, bijvoorbeeld bij hover of focus en hoe ze die kunnen negeren of verwijderen.

Principe 2: Bedienbaar

Informatie moet navigeerbaar en bruikbaar zijn, hoe iemand er ook gebruikt van maakt, bijvoorbeeld zonder muis, met stemcommando's, of met schermvergroting.

Richtlijn 2.1: Zorg dat de functionaliteit werkt met een toetsenbord

• 2.1.1: Zorg ervoor dat elke taak kan worden uitgevoerd met alleen een toetsenbord.
• 2.1.2: Zorg ervoor dat gebruikers van een toetsenbord niet vast komen te zitten bij het navigeren door content.
• 2.1.4: Zorg voor een manier om eigen sneltoetsen uit te schakelen of opnieuw toe te wijzen.

Richtlijn 2.2: Geef mensen voldoende tijd om inhoud te lezen en te gebruiken

• 2.2.1: Geef een manier om tijdslimieten uit te schakelen of te verlengen.
• 2.2.2: Geef een manier om content te stoppen die vaak wordt bijgewerkt, knippert of automatisch scrolt.

Richtlijn 2.3: Veroorzaak geen epileptische aanvallen

• 2.3.1: Gebruik geen content die meer dan drie keer per seconde knippert.

Richtlijn 2.4: Bied manieren om mensen te helpen navigeren en inhoud te vinden

• 2.4.1: Geef mensen die geen muis gebruiken een manier om naar het begin van de hoofdinhoud te gaan.
• 2.4.2: Geef elke pagina een unieke en behulpzame titel die het doel van de pagina aangeeft.
• 2.4.3: Zorg ervoor dat de focus van onderdelen een logische volgorde heeft.
• 2.4.4: Zorg ervoor dat het doel van een link duidelijk blijkt uit de linktekst, of uit de linktekst in combinatie met omliggende inhoud.
• 2.4.5: Geef mensen verschillende manieren om inhoud te vinden (zoals zoeken of bladeren door links).
• 2.4.6: Gebruik koppen en formulierlabels die mensen helpen inhoud te vinden en taken uit te voeren.
• 2.4.7: Zorg ervoor dat mensen die een toetsenbord gebruiken om te navigeren, altijd kunnen zien waar ze zich op een pagina bevinden.

Richtlijn 2.5: Maak functies eenvoudig te gebruiken door middel van verschillende invoer mogelijkheden naast het toetsenbord

• 2.5.1: Vereis geen complexe gebaren om dingen te doen.
• 2.5.2: Zorg ervoor dat verkeerde on ongewenste gebaren en klikacties geen activatie tot gevolg hebben of dit voorkomen kan worden.
• 2.5.3: Zorg ervoor dat voor bedieningselementen met een zichtbaar label de toegankelijke naam hiermee overeenkomt.
• 2.5.4: Zorg ervoor dat functies niet alleen geactiveerd kan worden door het toestel te schudden of te kantelen.

Principe 3: Begrijpelijk

Je moet informatie begrijpelijk maken, en het voor mensen gemakkelijk maken om te begrijpen hoe ze taken moeten uitvoeren.

Richtlijn 3.1: Maak tekst begrijpelijk en leesbaar

• 3.1.1: Geef (technisch) de taal aan waarin de inhoud is geschreven.
• 3.1.2 Geef (technisch) de veranderingen in taal van (delen van) de inhoud aan.

Richtlijn 3.2: Maak pagina's voorspelbaar

• 3.2.1: Laat geen verrassende dingen gebeuren (zoals het openen van een nieuwe pagina), wanneer iemand ergens de focus plaatst.
• 3.2.2: Zorg dat er geen verrassende dingen gebeuren wanneer iemand interactief met inhoud omgaat (zoals scrollen door een set opties).
• 3.2.3: Zorg ervoor dat manieren om inhoud te vinden en er doorheen te navigeren (zoals zoeken) er hetzelfde uitzien en zich op dezelfde manier gedragen als ze op meerdere plaatsen worden gebruikt.
• 3.2.4: Zorg ervoor dat functies er hetzelfde uitzien en zich hetzelfde gedragen wanneer ze op meerdere plaatsen worden gebruikt.

Richtlijn 3.3: Help mensen fouten te voorkomen en te herstellen

• 3.3.1: Wanneer iemand een fout maakt, geef dan een foutmelding en maak duidelijk waar de fout is gemaakt.
• 3.3.2: Geef labels op formulieren om duidelijk te maken welke informatie wordt verwacht, en geef optioneel extra hints om mensen te helpen fouten te vermijden.
• 3.3.3: Als iemand een fout maakt, geef hem dan suggesties over hoe hij die kan verbeteren, maar geef geen suggesties die een negatieve invloed hebben op de veiligheid.
• 3.4.4: Geef mensen een manier om de informatie die ze hebben ingevoerd te bekijken en te controleren, en om eventuele fouten die ze hebben gemaakt te corrigeren.

Principe 4: Robuust

Zorg dat je website of app werkt met verschillende browsers en ondersteunende technologieën die nu in gebruik zijn en gebruik technieken op zo'n manier dat het bruikbaar blijft voor de toekomst.

Richtlijn 4.1: Zorg voor ondersteuning met verschillende browsers en hulptechnologieën

• 4.1.1: Zorg ervoor dat de code van elke pagina geen fouten bevat die een negatieve invloed hebben op de manier waarop browsers en ondersteunende technologieën samenwerken.
• 4.1.2: Zorg ervoor dat de code ondersteunende technologieën in staat stelt het doel van elke functie te ontdekken (rol), de manier waarop die functie wordt geïdentificeerd (naam), en de staat waarin de functie zich op dat moment bevindt (waarde).
• 4.1.3: Zorg ervoor dat statusberichten worden getoond op een manier die ondersteunende technologieën begrijpen zonder de focus te verplaatsen.