Wat is DigiToegankelijk?

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!

Wat heb je aan een toegankelijke website?

• Efficiëntie gebruik van jouw website
• Participatie van gebruikers
• Kwaliteit, duurzaamheid en gebruiksvriendelijkheid
• Vindbaarheid en doorzoekbaarheid van je informatie
• Tevredenheid bij bezoekers en medewerkers
• Sociale bewustwording in je organisatie
• Goed voor je sociale profiel en diversiteit
• Duidelijke communicatie met leveranciers
• Kostenreductie

Wat valt er allemaal onder een website?

• Alles wat je via de browser binnenkrijgt
• Webpagina’s met afbeelding, tekst
• Multimedia content (video, audio, VR, etc)
• Interactieve onderdelen en processen
• Externe content waar je verantwoordelijk voor bent
• (Mobiele) applicaties (pas vanaf 23 juni 2021 verplicht)
• Documenten (PDF etc.)

Gebaseerd op de WCAG

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 onderwerpen

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:

• Niveau A: het minimale toegankelijkheidsniveau (30 criteria)
• Niveau AA: goede toegankelijkheid (extra 20 criteria)
• Niveau AAA: uitstekende toegankelijkheid, ook voor specifiekere beperkingen (extra 28 criteria)

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.

Principe 1 Waarneembaarheid

Informatie en componenten op de website moeten waarneembaar zijn voor de gebruiker.

1.1 Tekst alternatief

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.

1.2.2 t/m 1.2.5 Lever alternatieven voor op tijd gebaseerde media

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.

1.3 Aanpasbaar

Maak content die op meerdere manieren gepresenteerd kan worden zonder dat het zijn informatie of structuur verliest.

1.3.1 Info en relaties

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.

1.3.2 Betekenisvolle volgorde

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.

1.3.3 Zintuigelijke eigenschappen

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.

1.3.4. Weergavestand

De content op de pagina beperkt de weergave en bediening niet tot enkel staand of liggend behalve als dit echt essentieel is.

1.4 Onderscheidbaar

Maak het voor gebruikers gemakkelijker om content te horen en te zien, door scheiding van voorgrond en achtergrond.

1.4.1 Gebruik van kleur

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.

1.4.2 Geluidsbediening

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.

1.4.4 Herschalen van de tekst

De tekst kan zonder hulptechnologie tot 200% geschaald worden zonder verlies van content of functionaliteit. Dit geldt niet voor de ondertiteling.

1.4.5 Afbeeldingen van tekst

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.

1.4.10 Reflow

De content op de pagina kan zowel horizontaal als verticaal worden weergeven

1.4.11 Leesbaarheid

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.

1.4.12 Tekstafstand

Er wordt rekening gehouden met de leesbaarheid voor gebruikers met een visuele beperking door:

• Regelhoogte (regelafstand) naar ten minste 1,5 keer de lettergrootte;
• Afstand tussen alinea’s naar ten minste 2 keer de lettergrootte;
• Letterafstand (spatiëren van letters) naar ten minste 0,12 keer de lettergrootte;
• Spatiëren van woorden naar ten minste 0,16 keer de lettergrootte.

1.4.13 Content bij hover of focus

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.

Principe 2 Bedienbaarheid

Onderdelen van de website en navigatie moeten goed bedienbaar zijn door de gebruiker.

2.1 Toetsenbord toegankelijkheid

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.

2.1.2 Geen toetsenbord val

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.

2.1.4 Enkel teken sneltoetsen

Als er sneltoetsen worden gebruikt op de website moeten deze makkelijk kunnen worden uitgezet en opnieuw kunnen worden toegewezen aan andere toetsen.

2.2 Genoeg tijd

Geef de gebruikers genoeg tijd om content te lezen en te gebruiken.

2.2.1 Timing aanpasbaar

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

• De gebruiker kan de tijdslimiet uitzetten voordat die wordt bereikt
• De gebruiker mag de tijdslimiet aanpassen.
• De gebruiker krijgt een waarschuwing als de tijd afloopt en heeft minstens 20 seconden de tijd om deze te verlengen.

2.2.2 Pauzeren, stoppen, verbergen

Alle bewegende, knipperende en scrollende elementen moet kunnen worden gepauzeerd, gestopt of verborgen.

2.3. Fysische reacties

2.3.1 Flitsen

De website mag geen elementen bevatten die meer dan 3 keer knipperen in 1 seconde. Dit is in verband met gebruikers die elisie hebben.

2.4 Navigeerbaar

2.4.1 Blokken omzeilen

De pagina moet skiplinks bevatten. Die maken het mogelijk om blokken content die meerdere malen op de pagina voorkomen te omzeilen.

2.4.2 Paginatitel

Webpagina’s moeten een titel hebben die het onderwerp en doel van de pagina omschrijven. Titels moeten daarbij ook uniek zijn.

2.4.2 Focus volgorde

De volgorde van content moet logisch zijn wanneer genavigeerd wordt over de pagina met het toetsenbord.

2.4.4 Linkdoel

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.

2.4.5 Meerdere manieren

Er moet naast de hoofdnavigatie nog 2 andere manieren zijn om de webpagina’s te bereiken.

2.4.6 Knoppen en labels

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.

2.4.7 Focus zichtbaar

Wanneer de gebruiker met het toetsenbord de webpagina bedient moet hij goed kunnen zien waar hij zich bevindt op de pagina.

2.5 Modaliteiten

2.5.1 Aanwijzer gebaren

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.

2.5.2 Aanwijzer annulering

Er moet een mogelijkheid zijn om een touch-handeling ongedaan te maken.

2.5.3 Label in naam

De tekst die in buttons staat, moet een duidelijke naam hebben die omschrijft wat de functie is.

2.5.4 Bewegingsactivering

Functionaliteiten die alleen maar door beweging worden bediend, moeten ook kunnen worden uitgeschakeld. Denk aan bijvoorbeeld aan het schudden of draaien van je scherm.

Principe 3 Begrijpelijk

Informatie en de werking van de website moet duidelijk zijn voor de gebruiker.

3.1 Leesbaar

3.1.1 Taal van pagina

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.

3.1.2 Taal van onderdelen

Als de website gebruik maakt van verschillende talen is dit aangegeven in de code.

3.2 Voorspelbaar

3.2.1 Focus

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.

3.2.2 Input

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.

3.2.3 Consistente navigatie

Het navigatiemenu heeft een logische volgorde en komt op iedere pagina op dezelfde manier terug.

3.2.4 Consistente identificatie

De onderdelen van het navigatiemenu hebben een duidelijke omschrijvende naam en komen consistent terug op iedere pagina.

3.3. Assistentie bij invoer

Help de gebruikers om fouten te voorkomen door ze te verbeteren.

3.3.1 Foutidentificatie

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.

3.3.2 Labels of instructie

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.

3.3.3 Foutsuggestie

Invoervelden geven automatisch feedback bij het herkennen van een fout om deze te voorkomen.

3.3.4 Foutpreventie

Voor webpagina’s waar financiële gegevens moeten worden ingevoerd moet de gebruiker tenminste 1 van de volgende punten kunnen toepassen:

• Terugdraaien
• Verzending ongedaan maken
• Controleren
• De gegevens worden gecontroleerd
• Feedback gegeven op eventuele fouten
• Er is een systeem dat de gegevens beoordeeld,bevestigd en verbeterd voordat actie wordt voltooid.

Principe 4 Robuust

Content moet voldoende robuust zijn om betrouwbaar geïnterpreteerd te kunnen worden door een breed scala aan hulpmiddelen.

4.1 Compatibel

4.1.1 Parsen

De HTML-code bevat zo min mogelijk fouten doordat:

• De elementen een begin-tag en een eind-tag hebben
• De elementen juist zijn genest in de code
• De elementen geen dubbele attributen bevatten
• Alle ID’s uniek zijn

4.1.2 Naam rol, waarde

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.

4.1.3 Statusmeldingen

Alle statusmeldingen zoals foutmeldingen moeten ook beschikbaar zijn voor hulpapparatuur voor gebruikers met een beperking.

Bronnen

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/