geschreven door op 03 nov. 2020
Digitoegankelijk is een belangrijk en actueel item. Maar hoe maak je een website nu toegankelijk voor iedereen? Dat kan door het volgen van de WCAG (Website Content Accessibility Guidelines). Hier vind je een WCAG-checklist met alle eisen waaraan je website dient te voldoen voor niveau AA, het wettelijk verplichte niveau. Je kunt de WCAG-checklist ook downloaden als pdf.
DigiToegankelijk is de Nederlandse naam voor de standaard waarmee overheidsorganisaties hun websites en apps toegankelijk moeten maken voor alle burgers. Toegankelijk betekent hier bruikbaar voor iedereen: jong, oud, met of zonder beperking.
De Nederlandse overheid wil dat openbare voorzieningen te gebruiken zijn voor alle burgers. Niet alleen ge- bouwen of het openbaar vervoer, maar ook digitale voorzieningen als websites en apps. Daarom is digitale toegankelijkheid wettelijk verplicht voor alle overheidsorganisaties (“DigiToegankelijk | Logius,” n.d.).
De deadline voor een digitoegankelijke website was op 23 september 2020 en de deadline voor digtoegankelijke apps is op 23 juni 2021.
Maar liefst 25% van de bevolking (4.500.000 mensen) heeft een beperking. Door je website DigiToegankelijk te maken stel je je website open aan een groot deel van onze samenleving.
Heb je een digitoegankelijke website nodig of wil je de toegankelijkheid van je app verbeteren? Bekijk dan onze dienstenpagina digitoegankelijkheid en vraag meteen een gratis scan aan!
DigiToegankelijk is gebaseerd op een internationale toegankelijkheidsstandaard: de Web Content Accessibility Guidelines (WCAG). Deze standaard is in beheer bij het World Wide Web Consortium (W3C). Als een website of app aan de eisen van Digitoegankelijk voldoet, garandeert dit maximale toegankelijkheid door het toepassen van technische en inhoudelijke ontwerpprincipes (WGAC, 2020).
De regels in dit document zijn afkomstig van de WCAG versie 2.1. Deze zijn gebaseerd op 4 belangrijke principes:
Principe 1: Waarneembaar
Informatie en componenten op de website moeten waarneembaar zijn voor de gebruiker.
Principe 2: Bedienbaar
Onderdelen van de website en navigatie moeten goed bedienbaar zijn door de gebruiker.
Principe 3: Begrijpelijk
Informatie en de werking van de website moet duidelijk zijn voor de gebruiker.
Principe 4: Robuust
De inhoud van de webpagina moet goed beschikbaar zijn voor hulpmiddelen zoals een screenreader.
Op basis van deze 4 principes zijn er succescriteria die zijn opgedeeld in de volgende niveaus:
Om te voldoen aan de minimale eisen van de overheid moet een DigiToegankelijke website voldoen aan niveau A en AA. In dit document hebben we de 50 succescriteria uitgelegd zodat je makkelijk kan checken of jouw website DigiToegankelijk is. De nummering van de kopjes komt overeen met de nummer in de WCAG, zodat je het makkelijk terug kan vinden.
Informatie en componenten op de website moeten waarneembaar zijn voor de gebruiker.
Als je niet tekstuele content plaats op de website zoals afbeeldingen, buttons moeten deze een alternatieve tekst bevatten zodat bijvoorbeeld slechtzienden deze kunnen luisteren via de screenreader.
Van vooraf opgenomen video’s moeten een tekstalternatief en audio alternatief beschikbaar zijn voor zowel slechtzienden als slechthorenden. Een audio alternatief is alleen nodig als er in de video informatie wordt overgebracht door middel van beeld i.p.v. audio.
Het is belangrijk dat je rekening houdt dat de belangrijkste informatie vooral wordt gegeven via het geluid en als alternatief voor slechthorenden via de ondertiteling. De ondertiteling moet duidelijk onderaan het beeld staan.
Dit geldt ook voor alle live content.
Maak content die op meerdere manieren gepresenteerd kan worden zonder dat het zijn informatie of structuur verliest.
De informatie die wordt overbracht als visuele presentatie moeten herkend en voorgelezen kunnen worden door software of er moet een alternatief beschikbaar zijn in de tekst.
Wanneer er content is die op een bepaalde manier gepresenteerd moet worden zoals een stappenplan, moet dit in de code worden aangegeven zodat hulpapparatuur dit op de juiste manier kan lezen.
Informatie of instructies worden niet alleen aangeduid door kleur en vorm bijvoorbeeld doordat iets rood kleurt als het fout is. Voor mensen die bijvoorbeeld kleurenblind zijn of door middel van een screenreader lezen zal dit onduidelijk zijn en daarom moet het ook aangegeven worden doormiddel van tekst.
De content op de pagina beperkt de weergave en bediening niet tot enkel staand of liggend behalve als dit echt essentieel is.
Maak het voor gebruikers gemakkelijker om content te horen en te zien, door scheiding van voorgrond en achtergrond.
Kleur wordt niet als het enige visuele middel gebruikt om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden.
Dit is bijvoorbeeld met de kleur groen en rood om goed en slecht aan te tonen. Voor kleurenblinden is dit niet duidelijk en moet het worden aangevuld met een icoon of met tekst.
Als er een video of audiofragment automatisch meer dan 3 seconden wordt afgespeeld op de website moet hier een duidelijke aan-uit knop voor zijn. Dit is om te voorkomen dat het geluid van de audio/video en de screenreader door elkaar heen lopen.
De tekst kan zonder hulptechnologie tot 200% geschaald worden zonder verlies van content of functionaliteit. Dit geldt niet voor de ondertiteling.
Op de webpagina mag geen tekst in een afbeelding worden geplaatst, want hierdoor kunnen de screenreaders dit niet kunnen lezen. Daarnaast kan de tekst ook niet goed worden uitvergroot.
De content op de pagina kan zowel horizontaal als verticaal worden weergeven
Er wordt rekening gehouden met een contrast verhouding van tenminste 3:1 met de aangrenzende kleuren. Dit geldt niet voor inactieve componenten van de gebruikersinterface en grafische objecten.
Er wordt rekening gehouden met de leesbaarheid voor gebruikers met een visuele beperking door:
Er mag geen content zichtbaar worden en daarna weer verborgen door het gebruik van een hover of focus met het toetsenbord. Een hover is als je met de muis over een element op de webpagina heen gaat en dat element verandert. Focus is als je met je muis bijvoorbeeld in een veld of element klikt en daardoor de content verandert.
Onderdelen van de website en navigatie moeten goed bedienbaar zijn door de gebruiker.
Alle functionaliteit op de pagina zijn bedienbaar door middel van het toetsenbord. Dit is voor gebruikers die geen gebruik kunnen maken van een muis maar door middel van het toetsenbord de pagina bedienen.
Het bedienen met een toetsenbord van de pagina moet vloeiend en logisch navigeren zonder dat de gebruiker tegen obstakels loopt.
De gebruiker moet als hij navigeert op de pagina met zijn toetsenbord naar een component, weer makkelijk uit het component komen door het gebruik van de standaardtoetsen.
Als er sneltoetsen worden gebruikt op de website moeten deze makkelijk kunnen worden uitgezet en opnieuw kunnen worden toegewezen aan andere toetsen.
Geef de gebruikers genoeg tijd om content te lezen en te gebruiken.
Voor alle content op de pagina met een tijdslimiet, zoals automatisch uitloggen, moet rekening worden gehouden met het volgende:
Er geldt tenminste 1 van de volgende punten
Alle bewegende, knipperende en scrollende elementen moet kunnen worden gepauzeerd, gestopt of verborgen.
De website mag geen elementen bevatten die meer dan 3 keer knipperen in 1 seconde. Dit is in verband met gebruikers die elisie hebben.
De pagina moet skiplinks bevatten. Die maken het mogelijk om blokken content die meerdere malen op de pagina voorkomen te omzeilen.
Webpagina’s moeten een titel hebben die het onderwerp en doel van de pagina omschrijven. Titels moeten daarbij ook uniek zijn.
De volgorde van content moet logisch zijn wanneer genavigeerd wordt over de pagina met het toetsenbord.
Alle links op de pagina moeten een duidelijke linktekst hebben die de context omschrijft. Denk hierbij aan een button met de tekst ‘Lees meer’. Voor een gebruiker met een screenreader is dit nietszeggend, zeker als hij alle links achter elkaar hoort.
Er moet naast de hoofdnavigatie nog 2 andere manieren zijn om de webpagina’s te bereiken.
Knoppen en labels moeten duidelijk het onderwerp of doel beschrijven zodat de gebruiker begrijpt wat er gebeurt als hij op de knop drukt of een invoerveld invult.
Wanneer de gebruiker met het toetsenbord de webpagina bedient moet hij goed kunnen zien waar hij zich bevindt op de pagina.
Alle functionaliteiten op de webpagina die worden bediend met gebaren moeten op meerdere manieren worden aangeboden. Denk bijvoorbeeld aan swipen of inzoomen met je vingers op een touchscreen. Dit moet ook mogelijk zijn met het toetsenbord.
Er moet een mogelijkheid zijn om een touch-handeling ongedaan te maken.
De tekst die in buttons staat, moet een duidelijke naam hebben die omschrijft wat de functie is.
Functionaliteiten die alleen maar door beweging worden bediend, moeten ook kunnen worden uitgeschakeld. Denk aan bijvoorbeeld aan het schudden of draaien van je scherm.
Informatie en de werking van de website moet duidelijk zijn voor de gebruiker.
Als de tekst op de webpagina in het Nederlands geschreven is, is deze ook voor de screenreader ingesteld op Nederlands. Anders kan de screenreader moeite hebben met woorden uitspreken.
Als de website gebruik maakt van verschillende talen is dit aangegeven in de code.
Als de gebruiker ergens op focust, mag de context niet veranderen. Er mag bijvoorbeeld geen extra informatie in beeld komen. Er mag bijvoorbeeld niet als je ergens op klikt ineens extra informatie komen zonder dat die gebruiker hiervan weet door bijvoorbeeld een “lees meer” button.
Ook moet er duidelijk zijn waar de focus ligt. De gebruiker moet kunnen zien waar hij is op de pagina, dit kan je doen door bijvoorbeeld het invoerveld te laten veranderen qua vormgeving als de focus hierop ligt.
Als de gebruiker ergens input op geeft mag de context niet veranderen. Bijvoorbeeld wanneer de gebruiker op een invoerveld veld klikt mag er niet ineens “het wachtwoord moet minimaal 1 hoofdletter bevatten” verschijnen.
Dit moet vooraf al zichtbaar zijn.
Het navigatiemenu heeft een logische volgorde en komt op iedere pagina op dezelfde manier terug.
De onderdelen van het navigatiemenu hebben een duidelijke omschrijvende naam en komen consistent terug op iedere pagina.
Help de gebruikers om fouten te voorkomen door ze te verbeteren.
Als bij het invullen van bijvoorbeeld een formulier een fout automatisch wordt ontdekt, dan krijgt de gebruiker hier direct en op de juiste plek feedback over.
Wanneer de gebruiker iets moet invoeren in bijvoorbeeld een formulier worden er duidelijke instructies gegeven zoals: “vul je naam in” en “gebruik minstens een hoofdletter en cijfer voor je wachtwoord.” Dit is om te voorkomen dat de gebruiker een fout maakt.
Invoervelden geven automatisch feedback bij het herkennen van een fout om deze te voorkomen.
Voor webpagina’s waar financiële gegevens moeten worden ingevoerd moet de gebruiker tenminste 1 van de volgende punten kunnen toepassen:
Content moet voldoende robuust zijn om betrouwbaar geïnterpreteerd te kunnen worden door een breed scala aan hulpmiddelen.
De HTML-code bevat zo min mogelijk fouten doordat:
Alle elementen op de webpagina kunnen worden bediend door hulpapparatuur voor gebruikers met een beperking. Om te controleren of dit juist werkt wordt er getest met online tools om zo te kijken welke elementen verbeterd moeten worden.
Alle statusmeldingen zoals foutmeldingen moeten ook beschikbaar zijn voor hulpapparatuur voor gebruikers met een beperking.
DigiToegankelijk | Logius. (n.d.). Retrieved August 16, 2020, from https://logius.nl/diensten/digitoegankelijk
Initiative, W. W. A. (2020, July 22). Web Content Accessibility Guidelines (WCAG) Overview. Retrieved October 16, 2020, from https://www.w3.org/WAI/standards-guidelines/wcag/