Check hier in het kort wat er in de WCAG 2.1 staat

Checklist richtlijnen voor toegankelijkheid WCAG 2.1

De internetorganisatie W3C beheert de standaard voor toegankelijkheid, de Web Content Accessibility Guidelines (WCAG). De standaard onderscheidt de niveaus A, AA en AAA. Voor de Nederlandse overheid geldt niveau AA als verplicht.

De toegankelijkheidsrichtlijnen omvatten 50 criteria. Ze zijn gebaseerd op 4 principes waaraan toegankelijke websites en applicaties moeten voldoen. Ze moeten voldoende Waarneembaar zijn, Bedienbaar zijn, Begrijpelijk zijn en Robuust zijn. Hieronder beschrijven we criteria globaal. De codering achter de beschrijving verwijst naar het betreffende succescriterium in de standaard zelf. Die kun je via de link hieronder, naar de website van W3C, raadplegen.

Principe 1: Waarneembaar

Alternatieve tekst 1.1.1
Blinde en slechtziende bezoekers laten de informatie op een website door hun computer via de screenreader voorlezen. Informatie zoals afbeeldingen, knoppen en invoervelden in formulieren moeten daarom een goed tekstueel alternatief of een naam hebben.

Ondertiteling voor doven en slechthorenden bij video of geluidsfragment 1.2.1
Als op een site een geluidsfragment of een video zonder geluid staat, moet deze van een alternatief worden voorzien zoals een beschrijvende tekst zodat de informatie voor iemand die doof of blind is begrepen kan worden.

Ondertiteling bij opgenomen video 1.2.2 en live video 1.2.4
Bij een video is ondertiteling (leesbare tekst onder in het beeld) erg belangrijk als je niet kunt horen. Bij video zit vaak de belangrijkste informatie in het geluid en niet in het beeld. Doorgaans is toevoegen van ondertiteling voldoende.

Audiodescriptie bij opgenomen video 1.2.3 & 1.2.5
Bij een video is soms audiodescriptie (beschrijvende extra hoorbare informatie) nodig voor mensen met een visuele beperking. In video’s wordt dan bijvoorbeeld iets in beeld gebracht dat belangrijke informatie overbrengt maar niet te horen is: denk aan bijvoorbeeld een tekstbalkje met de naam of functie van een geïnterviewde.

Info en relaties 1.3.1
Het is belangrijk dat informatie, structuur, en relaties die worden overgebracht door presentatie ook op een andere manier beschikbaar zijn. Denk aan het goed aangeven van een koppenstructuur of een sterretje bij een verplicht veld in een formulier.

Betekenisvolle volgorde 1.3.2
Als de volgorde waarin content wordt getoond belangrijk is voor de betekenis (denk aan een lijst van items), dan is het belangrijk dat dit ook wordt aangegeven in de code zodat dit door hulpapparatuur aan de gebruiker kan worden doorgegeven.

Zintuiglijke eigenschappen 1.3.3
Als zintuiglijke informatie wordt gebruikt (denk bijvoorbeeld aan knoppen met een blauwe pijl om naar de vorige of volgende pagina te gaan), let dan op dat gebruikers die dit niet kunnen zien begrijpen wat de bedoeling is. In dit geval: voeg de tekst 'volgende pagina' en 'vorige pagina' toe.

Scherm oriëntatie 1.3.4
De weergave en bediening van een scherm is niet beperkt tot een enkele schermstand (horizontaal óf verticaal). Dit is belangrijk voor bijvoorbeeld gebruikers die hun scherm horizontaal op een rolstoel hebben gemonteerd en deze niet kunnen draaien.

Automatisch vullen webformulier 1.3.5
Als een website zogenaamde ‘autocomplete’ gebruikt worden bekende velden automatisch gevuld. Dit is minder werk voor gebruikers en voorkomt fouten.

Kleurgebruik 1.4.1
Informatie die alleen wordt overgebracht door kleur, kan door mensen die geen kleuren kunnen zien niet worden begrepen. Zorg dus dat je naast kleur ook vorm gebruikt. Voorbeeld: een rood kruisje en groen vinkje.

Automatische spelende video en geluid 1.4.2
Omdat blinde bezoekers met voorleessoftware de website laten voorlezen, kan geluid dat automatisch afspeelt zeer storend zijn. Het geluid zit dan de spraakcomputer in de weg. Dit geldt vooral bij geluid dat langer dan 3 seconden duurt.

Kleurcontrast 1.4.3
Het is met name voor slechtziende en kleurenblinde gebruikers belangrijk om voldoende contrast te bieden tussen de tekstkleur en de achtergrondkleur, zodat de tekst goed kan worden gelezen.

Schaalbare tekst 1.4.4
Voor slechtziende gebruikers is het belangrijk dat tekst op een internetpagina vergroot kan worden (vaak via control-muiswiel) voor een betere leesbaarheid.

Afbeeldingen van tekst 1.4.5
Voor bezoekers met een visuele beperking is het belangrijk dat tekst als echte tekst op een internetpagina wordt geplaatst en niet als een afbeelding. Deze tekst kan eenvoudig worden voorgelezen door hulpsoftware en schaalt automatisch mee met vergroten.

Reflow 1.4.10
Voor bezoekers die tekst vergroten is het belangrijk dat deze netjes op een pagina getoond blijft zonder te hoeven scrollen.

Contrast van niet-tekstuele informatie 1.4.11
Voor onder meer bezoekers met een visuele beperking is het van belang dat grafische elementen zoals iconen, buttons en randen van invulvelden voldoende contrast hebben.

Tekstafstand 1.4.12
Om tekst voldoende leesbaar te laten zijn voor onder andere bezoekers met een visuele beperking en dyslexie is het belangrijk dat deze voldoet aan minimale lettergrootte, afstand tussen alinea’s, afstand tussen letters en tussen woorden.

Automatisch informatie bij een muisbeweging of ‘hover’ 1.4.13
Soms verschijnt er automatisch informatie als een gebruiker een muis beweegt over een scherm of door een toetsenbord commando. Denk aan een geel titelbalkje op een afbeelding of een submenu dat automatisch opent. Dit kan ongewenst zijn voor de gebruiker. Dit moet kunnen worden gestopt of ongedaan gemaakt als het de gebruiker in de weg zit.

Principe 2: Bedienbaar

Toetsenbordtoegankelijkheid en toetsenbordval 2.1.1 & 2.1.2
Mensen die blind of zeer slechtziend zijn, maar ook mensen met een beperkte handfunctie kunnen (vaak) geen muis gebruiken. Het is dus belangrijk dat een internetpagina ook met het toetsenbord te bedienen is. Een veelvoorkomend probleem wordt bijvoorbeeld gevormd door formulieren waarvan de verzendknop niet te bedienen is zonder muis.
 
Het is daarnaast belangrijk dat met het toetsenbord vrij door een pagina kan worden genavigeerd. Een typisch probleem is dat bij (complexe) interfaces de cursor/focus wordt ‘gegijzeld’ en men vast komt te zitten binnen een element op een pagina (denk aan bijvoorbeeld een kaartapplicatie). Dit noemen we de 'toetsenbordval'.

Sneltoetsen Tekentoets 2.1.4
Sommige pagina’s hebben sneltoetsen ingeprogrammeerd om eenvoudig een taak uit te voeren. Deze kunnen gebruikers in de weg zitten. Het is belangrijk dat deze onder meer gewijzigd en uitgezet kunnen worden.

Timing aanpasbaar 2.2.1
Mensen met een beperking hebben soms meer tijd nodig om door een pagina te navigeren. Op sommige websites en/of pagina’s (zoals formulieren) zit vanwege de veiligheid een tijdsbegrenzing om deze in te vullen of om ingelogd te blijven. Het is belangrijk dat deze tijd verlengd kan worden.

Pauzeren van automatische beweging 2.2.2
Bewegende, knipperende, scrollende of automatisch actualiserende content zoals sliders kunnen bezoekers afleiden bij het gebruik van de rest van de pagina. Het is belangrijk dat men deze beweging kan stoppen of pauzeren.

Flitsende content 2.3.1
Mensen kunnen een epileptische aanval krijgen van lichtflitsen. Zorg dat webpagina's niets bevatten wat meer dan drie keer in een seconde flitst.

Skiplinks 2.4.1
Gebruikers met screenreaders weten vaak niet wat er verder allemaal op de pagina staat. Ze beginnen elke keer bovenaan de pagina en moeten elke keer het hele menu door. Het is daarom belangrijk om een manier te bieden (skiplinks) om dit te kunnen overslaan.

Paginatitels 2.4.2
De paginatitel staat vaak bovenaan in het tabblad van je browser. Het is belangrijk om te zorgen dat de paginatitel uniek is op een pagina én beschrijvend is voor de pagina zelf. Bij spraaksoftware is het doorgaans het eerste wat wordt voorgelezen. Men kan zo bij het lezen van de titel al begrijpen wat ze kunnen verwachten op de pagina eronder.

Focus volgorde 2.4.3
Iemand die via het toetsenbord over een pagina navigeert, springt van element naar element. Het is belangrijk dat dit in een logische volgorde gebeurt.

Tekst van een link (linkdoel) 2.4.4
Met hulpapparatuur kunnen gebruikers een overzicht van links op een pagina opvragen. Het is belangrijk dat elke link ‘zelfverklarend’ en uniek is zodat duidelijk is wat het doel van de link is. Een veelgemaakte fout zijn de diverse ‘lees meer’-links op een pagina.

Meerdere manieren 2.4.5
Het is belangrijk om ervoor te zorgen dat iedere pagina op de website op minstens twee verschillende manieren te bereiken is. Dit helpt bezoekers met verschillende type beperkingen om content op de website te vinden op een andere manier dan de standaard navigatie.

Koppen en Labels 2.4.6
Goede koppen zijn essentieel om de structuur van een pagina te begrijpen en de inhoud te kunnen doorgronden. Blinde bezoekers kunnen met hun hulpapparatuur bijvoorbeeld een overzicht opvragen van alle koppen op de pagina en op die manier snel een beeld krijgen van de inhoud. Het is dus belangrijk dat kopteksten een goede beschrijving geven van het onderwerp.
 
Hetzelfde geldt voor labels in formulieren. Duidelijke beschrijvingen in labels zorgen ervoor dat het helder is wat er in het formulier ingevuld moet worden.

Zichtbaarheid van de focus 2.4.7
Als men met het toetsenbord navigeert is het belangrijk dat wordt aangegeven waar men is op de pagina: de focus van de pagina. Vaak wordt deze indicator weergegeven met een kader om het element waar op dat moment de focus op staat.

Vingerbeweging bij touchscreen 2.5.1
Voor sommige functies op een touchscreen, zoals bijvoorbeeld uitzoomen door twee vingers uit elkaar te bewegen, moet een alternatieve bediening aanwezig zijn. Denk bijvoorbeeld aan een button met plus of min symbool om in- of uit te zoomen.

Aanraakfunctie annuleren 2.5.2
Enkel het aanraken van een button op een touchscreen mag niet tot uitvoer van een functie leiden. Pas bij het loslaten mag er iets gebeuren. Van de button ‘afglijden’ is dan een manier om een functie te annuleren.

Naam in label 2.5.3
Voor elementen waar tekst in voorkomt (denk bv aan een ‘verstuur’-knop) is het belangrijk dat de naam in de code hetzelfde is als de naam op het scherm om verwarring te voorkomen.

Actie door beweging 2.5.4
Soms kunnen functies door schudden van een apparaat worden geactiveerd. In dat geval is het belangrijk dat er een alternatieve bediening van die functie is. Als een apparaat bijvoorbeeld op een rolstoel is gemonteerd is schudden niet mogelijk.

Principe 3: Begrijpelijk

Taal 3.1.1
Taal is erg belangrijk voor mensen die een screenreader gebruiken. Dit komt doordat bij verschillende talen bepaalde klanken letters of woorden anders door de computer worden uitgesproken. Zo geeft het uitspreken van Nederlandse tekst door een screenreader die op Engels staat veel problemen met de uitspraak.

Taalwisselingen 3.1.2
Het kan natuurlijk voorkomen dat er op een website ook andere talen gebruikt worden. Dit hoeft geen probleem te zijn zolang de verandering van taal in de code is aangegeven.

Gedrag bij verandering van focus 3.2.1
Het is belangrijk dat een gebruiker niet zonder waarschuwing de focus verandert zonder dat de gebruiker iets doet. Denk aan het zonder waarschuwing verplaatsen naar een andere pagina of naar een ander deel van de pagina.

Bij input 3.2.2
Het is belangrijk dat een gebruiker niet zonder waarschuwing in een andere context terechtkomt. Denk aan het zonder waarschuwing naar een ander soort pagina springen na het invullen van bijvoorbeeld een invulformulier.

Consistente navigatie en identificatie 3.2.3 & 3.2.4
De consistentie van de navigatie en de naamgeving zijn belangrijk om gebruikers een beeld te geven van de website en van waar ze naartoe gaan binnen de website. Het is erg verwarrend als een pagina meerdere verschillende namen heeft.

Foutmeldingen 3.3.1
Wanneer een gebruiker iets fout invult in een formulier is het belangrijk om goede aanwijzingen te krijgen om de fout te verbeteren.

Labels of instructies 3.3.2
Het is voor de gebruiker belangrijk om instructie te krijgen als men iets moet invoeren en dat invoervelden duidelijk benoemd zijn. Denk aan 'vul hier uw achternaam in' of 'klik op de verstuur button als u het formulier heeft ingevuld'.

Fout suggestie 3.3.3
Als een gebruiker een fout maakt bij het invullen van een formulier en deze wordt automatisch herkend, zorg dan dat er direct een suggestie verschijnt.

Foutpreventie 3.3.4
Als een gebruiker data invoert met bijvoorbeeld juridische of financiële gevolgen is het belangrijk deze ter controle kunnen worden bekeken voordat deze definitief worden ingestuurd. Dit is met name belangrijk voor mensen met een visuele beperking.

Principe 4: Robuust

Parsen 4.1.1
Webpagina’s worden geprogrammeerd in zogenaamde HTML-code. 'Parsen' is een term uit de informatica en heeft betrekking op hoe een computer teksten 'leest' en begrijpt. Browsers zijn in het algemeen redelijk vergevingsgezind bij fouten in deze code, maar hulpapparatuur is vaak meer kritisch en kan ‘struikelen’ over pagina’s met fouten in de grammatica. Er zijn gratis online tools waarmee eenvoudig testen kunnen worden uitgevoerd. Ook zoekmachines kunnen webpagina’s gemakkelijker bekijken als deze correct zijn opgemaakt.

Naam, rol, waarde 4.1.2
Op internetpagina’s worden vaak zelf geprogrammeerde elementen gebruikt. Het is dan belangrijk dat deze zich hetzelfde ‘gedragen’ als het origineel: de naam, rol en waarde moet hetzelfde gedrag vertonen. Ze worden als ze goed zijn geprogrammeerd door hulpapparatuur zoals schermlezers als zodanig gezien en behandeld. Denk hierbij aan bijvoorbeeld een uitklapmenu of het gebruik van speciaal vormgegeven selectieboxen.

Statusmeldingen 4.1.3
Soms worden statusmeldingen automatisch in een systeem doorgeven. Het is belangrijk dat deze statusmeldingen ook voor gebruikers met hulpapparatuur beschikbaar zijn. Dus op een manier dat deze status door de hulpapparatuur kan worden uitgelezen.