WCAG 2.1 webrichtlijnen in
begrijpelijke taal

1.1.1 Geef informatieve afbeeldingen en video’s een tekstuele beschrijving

Geef afbeeldingen en video’s die informatie overdragen een tekstueel alternatief. Het toevoegen van een ALT-tekst is niets anders dan tekstueel beschrijven wat je ziet of wat een element op de website doet. Elementen die puur ter decoratie zijn en dus geen informatie toevoegen, hoeven niet beschreven te worden.

1.2.1 Geef eerder opgenomen audio en video een tekstuele beschrijving

Maak alle video’s en audiofragmenten toegankelijk voordat deze online komt door ze een tekstalternatief te geven. Dit kun je doen door een transcript te maken of een audiobeschrijving toe te voegen. In deze tekstuele beschrijving benoem je heel specifiek wat er in beeld is. 

1.2.2 Geef eerder opgenomen audio en video een ondertiteling

Zorg dat er ondertiteling beschikbaar is voor alle eerder opgenomen audio- en videofragmenten. Ondertiteling voor doven en slechthorenden bevat naast gesproken tekst ook beschrijvingen van geluidseffecten.

1.2.3 Geef eerder opgenomen audio en video een audiobeschrijving of transcript

Zorg dat er audiobeschrijvingen of transcripten beschikbaar zijn voor alle niet live audio- en videofragmenten. In audiofragmenten worden belangrijke visuele details verteld. Dit is dus een aanvulling op wat al te horen is. Je kan denken aan specifieke handelingen en personages of teksten die in beeld zijn. 

1.2.4   Geef live audio en video een ondertiteling

Zorg dat er ondertiteling beschikbaar is voor alle live audio- en videofragmenten. Ondertiteling voor doven en slechthorenden bevat naast gesproken tekst ook beschrijvingen van geluidseffecten. Je kan denken aan gelach, muziek, een deur die sluit of een telefoon die afgaat.

1.2.5 Geef eerder opgenomen audio en video een audiobeschrijving

Bezoekers met een visuele beperking kunnen moeite hebben met het begrijpen van bewegende beelden. Lever daarom een audiodescriptie voor alle vooraf opgenomen videocontent in gesynchroniseerde media.

1.3.1 Zorg dat informatie, structuur en relaties in code of tekst zijn vastgelegd

Leg in de code van je website vast wat de relatie is tussen de verschillende onderdelen van een webpagina. Denk hierbij aan de functie van teksten maar ook van elementen zoals koppen, paragrafen en lijsten. Op die manier blijft de betekenis in stand, ongeacht op welke wijze de pagina aan jouw bezoeker wordt gepresenteerd.

1.3.2 Zorg dat de inhoud op een logische volgorde gelezen kan worden

Zorg dat de inhoud van jouw website op een logische volgorde gelezen kan worden door alle bezoekers.

1.3.3 Verwijs in instructies niet alleen naar zintuiglijke eigenschappen

Verwijs bezoekers via instructies door naar andere onderdelen op de pagina. Instructies die geleverd worden om content te begrijpen en te bedienen zijn niet alleen afhankelijk van zintuiglijke eigenschappen van componenten zoals vorm, omvang, visuele locatie, oriëntatie of geluid. Geef daarom een tekstuele omschrijving mee aan alle elementen op de website zodat een bezoeker weet welke actie er aan een element hangt.

1.3.4 Zorg dat jouw website is afgestemd op diverse schermresoluties

Hou er rekening mee dat jouw bezoekers gebruik maken van verschillende apparaten en zorg voor responsive oplossingen. De website moet zich automatisch kunnen aanpassen aan het beeldschermformaat van jouw bezoeker. Ook moeten alle webpagina’s zowel in landschap- als portretmodus goed weergegeven worden en te bedienen zijn, tenzij een website voor specifieke weergave ontwikkeld is.

1.3.5 Geef formuliervelden de juiste invoertypes

Zorg voor een goede structuur waarbij labels en invoervelden aan elkaar gekoppeld zijn. De labels dienen in het formulier als instructie. Zo stel je jouw bezoekers in staat om het formulier op de juiste manier te gebruiken.

1.4.1 Gebruik naast kleur ook tekst of andere visuele elementen om informatie over te dragen

Zorg dat alle informatie die je met kleur of vorm overbrengt ook met tekst of andere visuele hints over te brengen is. Bezoekers met een visuele beperking kunnen op die manier van alternatieven gebruik maken. Bijvoorbeeld door de tekst te laten voorlezen of om te laten zetten in braille.

1.4.2 Geef bezoekers de mogelijkheid om geluid dat automatisch (en langer dan sec) wordt afgespeeld uit te zetten of te dempen

Als een geluidsfragment op een webpagina automatisch meer dan 3 seconden speelt, moet de bezoeker de mogelijkheid hebben om de weergave te pauzeren, stoppen of het geluidsvolume te regelen. Dit is belangrijk voor mensen die voorleessoftware gebruiken en mensen die moeite hebben om zich te concentreren op visuele content als audio zich afspeelt.

1.4.3 Gebruik voldoende kleurcontrast voor tekst en afbeeldingen

Zorg dat het contrast tussen voor- en achtergrondkleuren ten minste 4,5:1 is. Zo is de tekst voor iedereen goed leesbaar en kan je de boodschap op jouw pagina nog beter overdragen. Uitzonderingen hierop zijn logo’s, grote afbeeldingen en titels, tekst en afbeeldingen die puur decoratief zijn. Om het contrast tussen twee kleuren te meten, kun je gebruik maken van een gratis tool.

1.4.4 Zorg dat alle tekst twee keer zo groot kan worden gemaakt

Maak het mogelijk dat jouw bezoekers de tekst tot tweehonderd procent kunnen vergroten. Uiteraard mag dit geen invloed hebben op de leesbaarheid of functionaliteit van de pagina. Tekst binnen de website moet te vergroten en verkleinen zijn middels de instellingen in de browser.

1.4.5 Gebruik geen afbeelding van tekst

Gebruik tekst in plaats van afbeeldingen met tekst. Dit heeft onder andere voordelen voor bezoekers die gebruik maken van voorleessoftware. Zo zou een afbeelding waar een titel boven staat, de titel liever als tekst worden weergegeven zodat deze makkelijk kan worden voorgelezen. Maar ook voor de vindbaarheid in zoekmachines is het slim om echte tekst te gebruiken. Er zijn een aantal uitzonderingen, denk hierbij aan teksten die onderdeel zijn van een logo of merknaam.

1.4.10 Zorg dat alle content op het scherm past

Websites die responsive gebouwd worden, behoren ten alle tijden binnen de breedte van het beeldscherm te blijven. Zowel in landschap- als portretmodus. Hiermee voorkom je dat jouw bezoeker informatie mist. 

1.4.11 Gebruik voldoende kleurcontrast voor elementen

Zorg dat alle elementen in jouw website zoals buttons, teksten en invoervelden voldoende kleurcontrast hebben. Zorg dat het contrast tussen voor- en achtergrondkleuren ten minste 3:1 is. Zo zijn elementen voor iedereen goed zichtbaar en kan je de boodschap op jouw pagina nog beter overdragen. 

1.4.12 Gebruik voldoende tekstafstand

Zorg voor een goede verhouding tussen letterafstand, lettergrootte, regelafstand en afstand tussen alinea’s. Er gelden specifieke eisen met betrekking tot de ruimte tussen de letters: 

• Regelhoogte (regelafstand) tot minimaal 1,5 keer de lettergrootte
• Afstand tussen volgende alinea tot minimaal 2 keer de lettergrootte
• Letterafstand tot minimaal 0,12 keer de lettergrootte
• Woordafstand tot minimaal 0,16 keer de lettergrootte

1.4.13 Geef bezoekers de mogelijkheid om extra inhoud te activeren of deactiveren

Wanneer je gebruik maakt van tooltips of popups op jouw website, zorg er dan voor dat jouw bezoeker deze makkelijk kan benaderen, activeren en verwijderen. 

2.1.1 Zorg dat alle functies te bereiken en bedienen zijn met het toetsenbord

Maak alle onderdelen van jouw website bereikbaar en bedienbaar met alleen het toetsenbord. Denk hier bijvoorbeeld aan de navigatie, een zoekbox, een formulier, een afbeelding, een carrousel, enzovoorts. Dat de functie op een toetsenbord anders werkt is geen probleem, zolang hetzelfde doel maar wordt bereikt.

2.1.2 Voorkom toetsenbordvallen op je website

Zorg dat de logische structuur van de website gevolgd wordt door het toetsenbord. Zo voorkom je dat bezoekers wel met het toetsenbord naar een bepaalde webpagina kunnen navigeren maar er niet meer vandaan. Jouw bezoeker komt dan niet verder en zit gevangen in een toetsenbordval. Omdat er ook bezoekers zijn die geen muis gebruiken, moeten alle onderdelen bedienbaar zijn met het toetsenbord.

2.1.4 Zorg dat sneltoetsen instelbaar zijn

Met een sneltoets kunnen bezoekers gemakkelijk en snel navigeren naar pagina’s binnen de website. Maar niet alle snelkoppelingen leveren voor al jouw bezoekers hetzelfde gemak op. Om te voorkomen dat bezoekers onbedoeld functies activeren, moeten de sneltoetsen instelbaar zijn. Maak het daarom mogelijk dat jouw bezoekers sneltoetsen uit kunnen schakelen, kunnen resetten of alleen actief kunnen maken als het element focus heeft. 

2.2.1 Geef bezoekers de mogelijkheid om de tijdslimiet uit te zetten of te pauzeren

Wanneer er aan een element een tijd gekoppeld zit, moet de tijdslimiet uitgezet kunnen worden, aan te passen zijn naar ten minste tien keer de originele tijdslimiet of verlengt kunnen worden. In dit laatste geval moet een bezoeker een waarschuwing krijgen voordat de tijd afloopt en een melding om met een simpele actie de tijd te verlengen. Uitzonderingen hierop zijn real-time evenementen zoals een online bieding, als de tijd van essentieel belang is zoals bij een examen of als het tijdsbestek langer is dan 20 uur.

2.2.2 Geef bezoekers de mogelijkheid om animaties en automatisch geupdate onderdelen te pauzeren, stoppen of verbergen

Zorg dat alles wat beweegt, knippert, scrollt of automatisch wordt geüpdate te pauzeren, stoppen of verbergen is. Alle bewegingen/veranderingen kunnen bezoekers namelijk afleiden met als gevolg dat ze jouw website beperkt kunnen gebruiken. Zo geef je jouw bezoekers de mogelijkheid om op hun gemak de content te lezen.

2.3.1 Laat elementen niet flitsen

Zorg dat de website niet meer dan 3 keer in een seconde flitst, tenzij het een klein gedeelte van het scherm betreft. Bij voorkeur flitsen elementen helemaal niet.

2.4.1 Zorg dat herhalende onderdelen overgeslagen kunnen worden

Geef jouw bezoekers de mogelijkheid om onderdelen die worden herhaald over te slaan. Denk bijvoorbeeld aan het navigatiemenu of advertenties. Door het aanbieden van skip-links stel je bezoekers in staat overbodige blokken over te slaan en sneller bij de inhoud te komen. In plaats van links kun je ook met code een groepering aanbrengen in onderdelen van de pagina, zodat ze kunnen worden overgeslagen.

2.4.2 Geef webpagina’s een titel die de inhoud van de pagina beschrijft

Kies voor iedere webpagina een titel die de inhoud ervan duidelijk beschrijft. Zo kunnen jouw bezoekers gemakkelijk informatie vinden. Een duidelijke titel beschrijft het onderwerp, is ook zonder context te begrijpen, is onderscheidend en vooral ook niet te lang.

2.4.3 Zorg voor een logische volgorde

Geef alle onderdelen van de webpagina een duidelijke focus als een bezoeker met het toetsenbord navigeert. Zorg dat er een logische volgorde is waardoor de betekenis van de  inhoud overeind blijft. Alle onderdelen van de pagina moeten goed bruikbaar blijven.

Hieronder nemen we je mee in de succescriteria en hoe je hier aan kunt voldoen. We volgen hierbij de WCAG 2.1 webrichtlijnen op niveau A en AA.

2.4.4 Schrijf heldere en begrijpelijke linkteksten

Geef links een tekst die het doel duidelijk beschrijft. Een duidelijke linktekst beschrijft waar naar wordt verwezen en is ook zonder context te begrijpen.

2.4.5 Zorg dat elke pagina op meerdere manieren te bereiken is

Geef jouw bezoekers minimaal twee manieren om webpagina’s te bereiken. Bijvoorbeeld via het navigatiemenu en de zoekfunctie. Zo zorg je ervoor dat alle bezoekers, onafhankelijk van voorkeuren en zoekstrategieën, bij de gewenste pagina uitkomen. Uitzonderingen hierop zijn tussenpagina’s binnen een specifiek proces zoals een bestelproces. 

2.4.6 Gebruik beschrijvende koppen en labels

Maak gebruik van koppen en tussenkoppen in je teksten zodat de inhoud gestructureerd en overzichtelijk blijft. Zorg dat zowel de koppen als de teksten die je gebruikt voor labels duidelijk beschrijven wat het onderwerp of de functie is. Met deze aanknopingspunten kan jouw bezoeker gemakkelijker zien of het de informatie is waar hij naar op zoek is.

2.4.7 Maak zichtbaar welk onderdeel van een pagina focus heeft

Geef bezoekers die met het toetsenbord navigeren duidelijk aan welk onderdeel de focus heeft. Door middel van een zichtbare focusring weet jouw bezoeker welk onderdeel van de webpagina actief is.

2.5.1 Zorg dat bezoekers alternatieve middelen kunnen gebruiken om de inhoud te bedienen

Heeft jouw website een element waarbij naast de muisaanwijzer meer aanwijsopties zitten, dan moet er een alternatieve manier van bedienen mogelijk zijn. Denk bijvoorbeeld aan de pijltjestoetsen om verder of terug te gaan en de plus- en minknop of een knijpbeweging om in en uit te zoomen op de inhoud.

2.5.2 Geef bezoekers de mogelijkheid een actie ongedaan te maken

Maak het mogelijk dat jouw bezoekers een onbedoelde actie of foutieve invoer gemakkelijk ongedaan kunnen maken. De meest toegankelijke manier om de actie te annuleren is door buiten het actieve veld te klikken, gebruik te maken van de ESC toets of door de muisknop langer ingedrukt te houden.

2.5.3 Gebruik duidelijke namen voor labels

Zorg dat alle elementen in de website waarbij labels gebruikt worden, voorzien zijn van een tekst die het doel duidelijk omschrijft. Dit zorgt ervoor dat jouw bezoeker weet welke actie er aan een element hangt.

2.5.4 Zorg dat er een alternatief is voor functies die geactiveerd worden op basis van beweging

Maak het mogelijk dat functies die geactiveerd worden door apparaat- of gebruikersbeweging ook op een andere manier bediend kunnen worden. Bezoekers die een fysieke beweging zoals schudden of kantelen niet kunnen uitvoeren, bied je zo een alternatief om nog steeds alle functionaliteiten te gebruiken.

3.1.1 Geef op elke pagina de standaard taal van de tekst aan

Bepaal wat de standaard taal van de webpagina is en geef dit in de code aan. Hulptechnologie zoals bijvoorbeeld schermlezers kunnen zo de tekst op de juiste manier uitspreken. Bijkomend voordeel van het instellen van de taal is dat het bijdraagt aan de vindbaarheid van jouw website. Zoekmachines gebruiken deze informatie namelijk om te bepalen of een pagina in de zoekresultaten wordt opgenomen.

3.1.2 Geef aan dat een gedeelte van de tekst in een andere taal is

Wanneer er specifieke onderdelen in de website in een andere taal zijn, bijvoorbeeld een quote of een gezegde, dan moet dit gedeelte van de tekst worden gemarkeerd als tekst uit een andere taal.

3.2.1 Laat een element dat focus krijgt niet zomaar veranderen

Voorkom dat de inhoud van een pagina zomaar verandert op het moment dat een element focus krijgt. Laat grote veranderingen pas gebeuren als jouw bezoeker zelf actie onderneemt om deze gebeurtenis in gang te zetten.

3.2.2 Laat een element dat focus krijgt niet zomaar veranderen, tenzij de bezoeker vooraf is geïnformeerd

Zorg dat jouw bezoeker op de hoogte is van de wijziging die plaats gaat vinden. Informeren betekent dat je in tekst aangeeft wat er zal gebeuren als er een optie wordt geselecteerd of formulierveld wordt ingevuld.

3.2.3 Houd een vaste volgorde aan voor de navigatie

Laat de onderdelen van de navigatie telkens in dezelfde volgorde terugkomen. Dit geldt voor het menu als hoogste niveau. Per pagina mogen wel extra niveaus (submenu’s) worden toegevoegd. Een vaste volgorde maakt jouw website gebruiksvriendelijker voor alle bezoekers.

3.2.4 Geef onderdelen die dezelfde functie hebben dezelfde beschrijving

Zorg dat je eenduidige beschrijvingen meegeeft aan onderdelen die hetzelfde doel dienen. Bijvoorbeeld teksten op knoppen of linkteksten. Door deze op consistente wijze aan te duiden, kunnen jouw bezoekers gemakkelijker dingen (terug)vinden op de website.

3.3.1 Geef aan waar en waarom formuliervelden onjuist zijn ingevuld

Toon bij een verkeerd ingevuld formulier veld waar de fout zit en beschrijf duidelijk wat er fout is. Fouten in een formulier kun je op verschillende manieren tonen aan een bezoeker maar geef een fout in ieder geval altijd aan in tekst. Dit kan je vervolgens aanvullen met andere aanwijzingen zoals kleurmarkering of een icoon.

3.3.2 Geef duidelijke instructies bij invoervelden

Zorg dat jouw bezoekers begrijpen welke invoer wordt verwacht in een formulierveld. Maak hiervoor gebruik van labels. De labels bij een formulierveld geven aan waarover het gekoppelde element gaat en dienen als instructie voor de gebruiker. Denk aan het label ‘voornaam’ bij een inputveld voor de voornaam en het label ‘achternaam’ voor je achternaam. Door duidelijke instructies is de kans op incomplete formulieren of formulieren met foutmeldingen een stuk kleiner. 

3.3.3 Geef bij een foutmelding suggesties ter verbetering

Toon bij een verkeerd ingevuld formulier veld waar de fout zit en geef, als dat kan, een suggestie ter vebetering. Zo weet jouw bezoeker ook hoe de fout opgelost kan worden. Let wel op: de suggestie mag nooit een beveiligingsprobleem opleveren.

3.3.4 Zorg voor een extra controlemoment bij belangrijke acties

Geef bezoekers bij belangrijke acties, zoals wettelijke of financiële transacties, de mogelijkheid om het formulier te controleren, bevestigen en annuleren. Soms kan het verkeerd invullen van een formulier ingrijpende gevolgen hebben. Door jouw bezoekers de mogelijkheid te bieden een inzending terug te trekken, help je jouw bezoekers grote fouten voorkomen.

4.1.1 Pas de programmeertaal die je gebruikt op de juiste wijze toe

Zorg dat alle code in de website correct en foutloos is opgebouwd. Door programmeertaal op de juiste wijze te gebruiken kunnen jouw webpagina’s goed gelezen worden door hulptechnologie en browsers. 

4.1.2 Zorg dat zelfgebouwde functionaliteiten gebruikt kunnen worden door hulptechnologie

Houd er rekening mee dat als je zelf interactieve functies ontwikkelt, hulptechnologie de naam, rol en waarde hiervan moet kunnen bepalen. Zo kunnen jouw bezoekers die gebruik maken van schermlezers of spraakherkenning deze onderdelen ook gebruiken. 

4.1.3 Maak bezoekers bewust van veranderingen in de inhoud

Geef veranderingen in de content aan door middel van statusberichten. Een statusbericht geeft jouw bezoeker informatie over de resultaten van een specifieke actie. Bijvoorbeeld nadat een bezoeker op de zoek knop heeft gedrukt, wordt de pagina-inhoud bijgewerkt en verschijnt het bericht dat er 5 resultaten zijn.