De overheid zegt:
De overheid zegt:
"Ieder mens heeft het recht om te leven als ieder ander en mee te doen in de maatschappij. Gebruikmaken van de mogelijkheden die het internet, computers en smartphones ons bieden hoort daar natuurlijk bij. Juist daarom is het belangrijk dat digitale dienstverlening toegankelijk is voor iedereen."
Beter voor iedereen
Miljoenen Nederlanders hebben één of meerdere beperkingen. Denk aan mensen die blind (78.000 mensen) of slechtziend (238.000), kleurenblind (700.000), doof of slechthorend (1.300.000), motorisch beperkt (1.500.000), dyslectisch (825.000) of laaggeletterd (1.500.000) zijn. Ook tijdelijke beperkingen vallen hieronder, zoals een gebroken arm, vermoeidheid of felle zon op je scherm.
De groep mensen die een toegankelijke website of app nodig heeft is groter dan je denkt. Daarom heeft de Nederlandse overheid in een wet vastgelegd dat iedereen jouw digitale product moet kunnen gebruiken. Deze regels gelden al voor websites en apps van overheidsinstanties en samenwerkingsverbanden waar de overheid aan deelneemt. Vanaf 2025 wordt dit uitgebreid naar meer sectoren zoals elektronische communicatiediensten, audiovisuele media, bankdiensten en e-commerce.
Een toegankelijke website biedt je ook extra voordelen. Je verbetert de vindbaarheid in zoekmachines omdat ze je site gemakkelijker kunnen indexeren. En je maakt de website voor alle bezoekers gebruiksvriendelijker. Twee factoren die bijdragen aan het succes van je website.
Geldt deze wet ook voor mij?
Geldt deze wet ook voor mij?
We zien dat de toegankelijkheidseisen voor steeds meer producten en diensten gaan gelden. Niet alle commerciële bedrijven worden verplicht om aanpassingen te doen. Toch stelt het recht op gelijke behandeling van mensen met een beperking ook eisen aan commerciële instellingen, op basis van 'redelijkheid'. Welke inspanning redelijk is om jouw site of app toegankelijk te maken, verschilt per bedrijf.
Voldoet mijn huidige site of app aan de eisen?
Is digitale toegankelijkheid voor jouw organisatie verplicht, of wil je gewoon je website voor iedereen bereikbaar maken? Dan wil je natuurlijk weten hoe jouw huidige site of app scoort op toegankelijkheid. De eisen gaan over afbeeldingen, geluid en video, animatie, formulieren, navigatie, tabellen, code, tekst en vormgeving. Ze vallen grofweg in twee categorieën: Vormgeving (hoe onderdelen worden weergegeven) en Techniek (hoe onderdelen worden gecodeerd).
De Nederlandse toegankelijkheidseisen zijn gebaseerd op de Web Content Accessibility Guidelines (WCAG) van het World Wide Web Consortium (W3C). Hierin staan alle adviezen, aandachtspunten en mogelijke implementaties voor toegankelijkheid op het web.
Mijn site voldoet niet! Wat nu?
Voldoet je site niet aan de toegankelijkheidseisen? Je hebt verschillende opties:
- Nieuwe look & feel
Hebben de punten waarop je slecht scoort vooral met vormgeving te maken? Bijvoorbeeld teksten op afbeeldingen, lage kleurcontrasten of kleine lettertypes? Dan kom je al een heel eind met aanpassingen aan de vormgeving. Dit is de minst ingrijpende optie.
- (Gedeeltelijk) redesign
Zijn er bepaalde onderdelen met structurele problemen? Dan kun je die delen van de site vernieuwen. Je kunt dan nadenken over hoe je de content het beste kunt presenteren zodat het toegankelijk is voor zoveel mogelijk mensen.
- Nieuwe website
Komen de aanpassingen qua tijd en kosten in de buurt van het volledig herbouwen van de website? Dan kan het slimmer zijn om voor een volledig nieuwe website te kiezen. Zo kun je vanaf het begin bij elke beslissing rekening houden met toegankelijkheid. In zowel vormgeving als techniek. En natuurlijk neem je meteen andere wensen mee in het nieuwe design.
Vormgeving - wat verandert er?
Door je website of app toegankelijk te maken kunnen meer mensen er gebruik van maken. Het aantal bezoekers kan dus toenemen! Maar misschien maak je je zorgen of je jouw huisstijl nog wel op dezelfde manier kunt blijven gebruiken. De toegankelijkheidseisen hebben gevolgen voor de vormgeving, waardoor je elementen van je huisstijl mogelijk anders moet toepassen. Dit komt omdat toegankelijke websites leesbaar moeten zijn, genoeg contrast moeten hebben en alle betekenis moet worden overgebracht met tekst, niet alleen met kleuren en afbeeldingen. Dit betekent niet dat je je huisstijl moet loslaten. Wel is het belangrijk er bewust mee om te gaan, zodat je digitale product voor zoveel mogelijk mensen bruikbaar wordt.
Leesbaarheid
Om je boodschap voor zoveel mogelijk gebruikers leesbaar te maken, is de leesbaarheid van teksten cruciaal. Hierbij kijken we naar een combinatie van twee eigenschappen: tekstgrootte en contrast tussen tekst en achtergrond. Kleuren uit je huisstijlgids hebben mogelijk niet genoeg contrast. Dan moet je het contrast verhogen of naar andere kleurcombinaties kijken. Bij kleine teksten (minder dan 16px) zijn de eisen strenger dan bij grotere teksten.
Veel huisstijlen gebruiken teksten op afbeeldingen. Dit is volgens de toegankelijkheidseisen niet toegestaan, zelfs niet met een overlay of tekstschaduwen. Je kunt namelijk niet garanderen dat de tekst in alle omstandigheden voldoende contrast heeft. Als oplossing worden teksten vaak boven of onder afbeeldingen geplaatst of in kaders met een achtergrondkleur.
Contrast
Naast tekstcontrast is het belangrijk om ook voldoende contrast te geven aan andere interactieve elementen. Denk aan iconen, knoppen, formuliervelden en scheidingen tussen secties.
Niet alleen met kleuren communiceren
Vertrouw niet alleen op kleuren om een betekenis over te brengen. Mensen met kleurenblindheid kunnen de betekenis dan verkeerd begrijpen. Kleuren hebben ook in verschillende culturen andere betekenissen. Voeg daarom altijd tekstuele uitleg toe. Tekst is ook makkelijker om te zetten in braille of spraak.
Een voorbeeld: op de linkerafbeelding zie je weinig contrast tussen elementen, geen omschrijvende labels bij de invoervelden en geen tekst op de knop.
Techniek - wat verandert er?
De basis van de meeste toegankelijkheidsimplementaties is HTML (Hypertext Markup Language). Deze opmaaktaal structureert een document zodat een browser het als webpagina kan weergeven. Niet alleen browsers, maar ook zoekmachines en hulpsoftware zoals screenreaders gebruiken HTML om inhoud te lezen, te indexeren of voor te lezen.
Een goede HTML-structuur is daarom essentieel om het deze software gemakkelijk te maken. Dit levert direct voordelen op voor toegankelijkheid, zonder extra inspanning.
Structuur
HTML bestaat uit tientallen elementen die informatie structureren, zoals lijsten, paragrafen en knoppen. Veel elementen hebben een specifiek doel, gedrag en betekenis (semantiek). Door de juiste elementen te gebruiken, kunnen hulpmiddelen de inhoud, context en belangrijkheid beter begrijpen.
Het juiste gebruik van elementen verbetert de toegankelijkheid niet direct, maar biedt wel mogelijkheden voor extra functionaliteit. Er zijn bijvoorbeeld elementen om de hoofdinhoud en navigatieblokken te markeren. Hierdoor krijgen ze context en betekenis, en kunnen gebruikers snel naar belangrijke onderdelen navigeren.
Deze elementen maken gebruik van de ARIA-standaard (Accessible Rich Internet Applications). Dit is een extra laag bovenop HTML die extra informatie deelt over structuur en interactie, specifiek voor toegankelijkheid. Deze standaard speelt bij bijna alle technische implementaties een rol.
Gedrag
Het juiste gebruik van HTML-elementen levert directe resultaten op in browsers en hulpsoftware. Voor elk element is standaardgedrag gedocumenteerd. Een goed voorbeeld is een button-element: het gedraagt zich als klikbaar, is via toetsenbord navigeerbaar, wordt door screenreaders als "klik + naam van de knop" voorgelezen, en krijgt standaardvormgeving zoals een blauwe rand als ernaar wordt genavigeerd. Deze voordelen krijg je simpelweg door het juiste element te gebruiken.
Een ander voorbeeld: lijsten. Je kunt visueel een lijst maken met streepjes of nummers, maar bij het juiste lijstelement krijg je niet alleen standaardvormgeving, maar ook toegankelijkheidsvoordelen. Screenreaders zullen bijvoorbeeld voorlezen hoeveel items de lijst bevat en welk item momenteel wordt voorgelezen.
Met een goede structuur leg je de basis voor een toegankelijke website zonder extra werk. Daarnaast zijn er implementaties voor toelichtingen en navigatie die je nog moet toevoegen.
Toelichtingen
Veel toegankelijkheidsadviezen gaan over het toelichten van webpagina-elementen, zoals afbeeldingen of interacties. De vuistregel is dat naast de visuele weergave ook een tekstalternatief moet zijn, dat hulpsoftware kan gebruiken.
Interactie
HTML-structuur geeft informatie over elementen en zorgt voor standaardvormgeving. Maar hoe elementen met elkaar communiceren of hoe interactie plaatsvindt, moet je extra aangeven met de ARIA-standaard. Hiermee stuur je extra toelichting naar hulpsoftware als alternatief voor de visuele weergave.
Een voorbeeld is role="alert". Voeg je dit toe aan een element, dan leest een screenreader de inhoud direct voor. Dit is handig voor foutmeldingen in formulieren, die visueel vaak met rode randen en tekst worden aangegeven. Blinde personen zien deze signalen niet, en zonder alert-rol kunnen ze de foutmelding missen als ze verder navigeren. Dan merken ze pas bij het verzenden dat er iets mis is, en moeten ze het hele formulier doorzoeken naar de fout – frustrerend en tijdrovend. Met de alert-rol krijgen ze direct feedback, net als in de visuele weergave.
Ook voor uitklappers zijn ARIA-attributen belangrijk. Visueel zie je met een plus/min-icoon of een element uitgeklapt kan worden, maar voor screenreaders moet je dit expliciet aangeven met attributen als aria-controls (verwijst naar het uitklapbare element), aria-expanded (geeft aan of het open of dicht is) en aria-hidden (geeft aan of de inhoud zichtbaar is).
Visuele elementen
Dit gaat over elementen die alleen visueel informatie overbrengen, zoals afbeeldingen en infographics. Je moet een tekstalternatief bieden voor mensen die ze niet of slecht kunnen zien, bijvoorbeeld met het alt-attribuut of een bijschrift. Voor video's zijn andere oplossingen nodig, zoals uitgeschreven tekst of ondertiteling.
Ook iconen hebben een tekstalternatief nodig. Dit kan met ARIA-attributen zoals aria-label of met een verborgen tekstelement dat hulpsoftware wel kan lezen.
Een voorbeeld: bij een artikel staat een spreekwolkje-icoon met een cijfer voor het aantal reacties. Een screenreader leest dit voor als "Icoon spreekwolkje, 10" zonder context. Door tekst toe te voegen ("Aantal reacties op dit artikel:") wordt het duidelijk.
Nog lastiger zijn knoppen met alleen een icoon, zoals een "vind ik leuk"-knop met een hartje. De context maakt de functie visueel duidelijk, maar voor screenreadergebruikers is "icon-heart" verwarrend. Door tekst toe te voegen wordt de knop begrijpelijk.
Decoratieve elementen zonder informatiewaarde kun je verbergen voor hulpsoftware met het aria-hidden-attribuut. Zo blijft de toegankelijke versie beknopt en gericht op de inhoud.
Kortom: zorg dat alle gebruikers alle content kunnen begrijpen. Dit doe je via design (contrast, lettergrootte) én techniek (tekstalternatieven).
Navigeren
Niet iedereen gebruikt een muis om te navigeren. Veel mensen gebruiken alleen het toetsenbord. Bij toetsenbordnavigatie spring je tussen 'focusable' elementen (knoppen, links, formulierelementen). Omdat je hierbij stukken van de pagina kunt overslaan, moet visueel duidelijk zijn waar je bent om niet te verdwalen. Browsers geven standaard al focus-vormgeving, maar je kunt ook eigen vormgeving toepassen die bij je huisstijl past.
Een voorbeeld van het verschil in vormgeving tussen de standaardweergave en ‘hover/focus’-weergave van 'focusable' elementen.
Naast visuele duidelijkheid is ook de volgorde van elementen belangrijk. Neem een pop-up met een sluitknop rechtsboven. Voor de vormgeving is het soms makkelijker om deze knop als eerste in de structuur te zetten. Voor screenreadergebruikers is dat echter niet logisch—zij horen dan direct de optie om te sluiten zonder eerst de inhoud te horen. Door alle acties onderaan te plaatsen, maak je één-richting navigatie mogelijk (alleen vooruit met tab in plaats van heen en weer).
Kijk dus goed naar welke rol de structuur speelt en welke rol de vormgeving heeft. Met CSS kun je de volgorde van elementen aanpassen, maar doe dit zorgvuldig. Een gebruiker verwacht dat navigatie van boven naar beneden en van links naar rechts verloopt. Als een tab-toets plotseling terug naar boven of links springt, zorgt dit voor verwarring.
Skiplinks
Naast goede navigatiestructuur is het handig om extra opties toe te voegen die navigeren gemakkelijker maken. Screenreaders beginnen na elke paginabezoek bovenaan de pagina met voorlezen. Bij het eerste bezoek is het nuttig om alle navigatiemogelijkheden te horen, maar na meerdere pagina's wordt het vervelend om steeds het hele hoofdmenu aan te horen.
Dit kun je oplossen met 'skiplinks' – links helemaal bovenaan de pagina die normaal alleen zichtbaar zijn voor screenreaders of bij toetsenbordnavigatie. Meestal laten ze je direct naar de hoofdinhoud springen, zodat je de herhalende navigatie kunt overslaan.
Vergeet dus nooit dat niet iedereen een muis gebruikt, en dat altijd duidelijk moet zijn waar de bezoeker zich bevindt. Geef ook de mogelijkheid om herhalende onderdelen over te slaan.
Toegankelijkheid in de toekomst
Het is belangrijk om jouw digitale product toegankelijk te maken voor zoveel mogelijk mensen. Soms is dit verplicht, en wij verwachten dat deze verplichtingen in de toekomst uitgebreider worden en voor meer sites en apps gaan gelden. Vooral voor ondersteuning van mentale beperkingen zien we nog grote kansen voor verbetering.
De Nederlandse toegankelijkheidsregels komen voort uit de Europese richtlijn. Deze gaat verder dan alleen websites en apps. Ook geldautomaten, smartphones, tv's, vervoersdiensten, bankdiensten, e-boeken en webwinkels moeten toegankelijk worden. We zien ook dat technologieën samenkomen – websites en apps vervullen steeds meer functies, zoals tv-kijken op je telefoon of betalen met een app. Ook vanuit dit perspectief zal waarschijnlijk meer regelgeving ontstaan.
Voor het bedrijfsleven is het nu nog een keuze om digitale producten wel of niet toegankelijk te maken. Ons advies? Maak je website of app toegankelijk, zodat zoveel mogelijk mensen jouw digitale dienst of product kunnen gebruiken!
