DigiToegankelijk
Deze standaard is verplicht voor alle websites van de overheid.
Dit artikel heeft als doel om developers ondersteuning te bieden bij het implementeren van de standaard DigiToegankelijk zoals vastgesteld door het Forum Standaardisatie.
Sinds 1 juli 2018 zijn overheidsorganisaties verplicht zich te houden aan de WCAG 2.1 richtlijnen. Dit om te zorgen dat zoveel mogelijk Nederlandse burgers, ook mensen met een beperking gebruik kunnen maken van overheidsdiensten.
Toegankelijkheid voor iedereen
Burgers kunnen bijvoorbeeld te maken hebben met permanente functiebeperkingen:
- slechthorendheid en doofheid
- lichtgevoeligheid, slechtziendheid en blindheid
- spraakbeperkingen
- motorische beperkingen
- cognitieve beperkingen
Naast permanente functiebeperkingen kunnen gebruikers ook te kampen hebben met:
- Tijdelijke functiebeperkingen, zoals een gebroken pols.
- Situationele functiebeperkingen, bijvoorbeeld fel zonlicht op een scherm of een gebruiker die een baby op de arm draagt.
De WCAG 2.1 bevat verschillende succescriteria die aansluiten bij de genoemde beperkingen. Deze succescriteria zorgen er bijvoorbeeld voor dat een kleurenblinde gebruiker alsnog begrijpt dat een bepaalde bewerking "gevaarlijk" kan zijn, terwijl deze niet kan zien dat de desbetreffende knop rood is.
De WCAG 2.1 dient toegepast te worden op:
- Websites, waaronder Single Page Applications (denk aan HTML, CSS, SVG, JavaScript)
- Documenten (zoals PDF, Word, Excel)
- Mobiele apps (zoals op iOS en Android)
Drie conformiteitsniveaus (A, AA, AAA)
Elk van de 78 successcriteria in WCAG 2.1 heeft een conformiteitsniveau. Websites en apps kunnen verklaren tot op welk niveau ze voldoen. De drie niveaus die WCAG onderscheidt, zijn:
- Niveau A (laagste niveau), 30 succescriteria
- Niveau AA, 20 succescriteria
- Niveau AAA (hoogste niveau), 28 succescriteria
In Nederland is het voor overheden verplicht om te voldoen tot niveau AA. Op niveau AAA kun je het beste per criterium inschatten of mogelijk is om te voldoen.
Correct HTML-gebruik voor toegankelijkheid
Belangrijk voor een toegankelijke website is dat je HTML-syntax correct gebruikt. Je wilt ervoor zorgen dat de structuur in je websites en apps die visueel zichtbaar is, terugkomt in de HTML. Zo kunnen hulptechnologieën, zoals screenreaders, je structuur ontsluiten op een manier die werkt voor de gebruiker. Bovendien maak je je eigen code leesbaarder en profiteer je van de standaardfunctionaliteiten die HTML biedt.
Wat je misschien niet direct zou verwachten, is dat HTML zelf ook een standaard is. Forum Standaardisatie beveelt de Nederlandse overheid aan om de HTML standaard te gebruiken zoals die door de standaardisatie-organisatie WHATWG is vastgelegd.
Alt text
Om afbeeldingen toegankelijk te maken voor gebruikers met screenreaders is een beschrijving of "alt-text" nodig. De screenreader leest dan deze tekst voor als hij de afbeelding tegenkomt.
Een voorbeeld van een alt-text:
<img
src="domtoren.jpg"
alt="Een foto van de Domtoren in Utrecht op een zonnige middag in de zomer"
/>
Touch target size
Een makkelijke manier om de gebruiksvriendelijkheid van je website te verhogen is door de minimale "target size" te hanteren. Een target kan alles zijn waar een gebruiker op poogt te klikken, bijvoorbeeld een button of een link. De minimale size van dit element dient 24 × 24 pixels te zijn. Gebruikers die moeite hebben met hun motoriek hebben hier profijt van, maar denk ook aan touchscreens.
Kleurgebruik
Zorg ervoor dat kleur niet het enige visuele middel is om informatie over te brengen, een actie aan te geven, tot een reactie op te roepen of een visueel element te onderscheiden. Niet iedereen kan alle kleuren onderscheiden of kleurcontrast even goed opmerken.
NL Design System
NL Design System is een community die zich bezighoudt met het gezamenlijk ontwikkelen van components met een hele hoge kwaliteitsstandaard als het gaat om toegankelijkheid. Het kan dus strategisch slim zijn om NL Design System te gaan gebruiken in jouw project, omdat je dan toegang hebt tot een hele rits aan componenten waarvan de toegankelijkheid al gewaarborgd is.
Acceptatiecriteria per component uit NL Design System
Naast het direct gebruiken van components kan je ook per component opzoeken welke acceptatiecriteria erop van toepassing zijn. Een voorbeeld hiervan is het button component: Button documentatie NL Design System
Alle acceptatiecriteria vertaald
Je kunt alle acceptatiecriteria van de WCAG 2.1 vinden in de documentatie van NL Design System. Deze criteria zijn aangevuld met voorbeelden zodat het makkelijker te begrijpen is hoe je precies aan een criterium kunt voldoen. De lijst van criteria vind je hier: WCAG criteria op NL Design System
Let op: het werk van NL Design System is work in progress, nog niet alle tekstjes zijn compleet. Het goede nieuws is dat jij kunt bijdragen aan het compleet maken van alle criteria, door bijvoorbeeld een issue aan te dragen.
Links
DigiToegankelijk.nl
Gebruikercentraal.nl
Tools
Axe DevTools
Axe DevTools is een browserplugin die voor zowel Chrome als Firefox beschikbaar is. Meer informatie over de plugin vind je hier: Axe DevTools
Playwright
Het end-to-end testing framework Playwright kan gebruikt worden om accessibility problemen op te sporen. Een link naar de documentatie vind je hier: Playwright
Wave
Wave is een online tool die websites kan scannen op toegankelijkheidsproblemen: Wave