Wat is de toegankelijkheidswet?
De European Accessibility Act (EAA) wordt sinds 28 juni 2025 toegepast. De wet heeft gevolgen voor commerciële bedrijven die digitale producten of diensten aan consumenten leveren, zoals webshops, ticketing, bankieren, reizen boeken, e-books en telecom. De EAA is niet hetzelfde als het BDTO voor overheidsinstanties en publiekrechtelijke instellingen. Micro-ondernemingen zijn voor diensten uitgezonderd; laat een jurist je situatie beoordelen als je precies op een grens zit.
Om te voldoen aan deze wet, moet je zorgen dat jouw websites, apps of andere digitale kanalen toegankelijk zijn voor mensen met een functiebeperking. Dat zijn bijvoorbeeld mensen die niet kunnen zien, die de muis niet kunnen gebruiken of die kleurenblind zijn. Uit onderzoeken blijkt dat het om zo’n 25 procent van alle mensen gaat. De wet is bedacht om ervoor te zorgen dat elk mens, met of zonder beperking, digitale diensten en producten kan gebruiken.
Voor een website of app die je vandaag onderhoudt betekent een overgangstermijn niet dat je toegankelijkheid kunt uitstellen. Begin bij de belangrijkste gebruikersflow: bij een webshop is dat van productkeuze tot betaling.
Wie moet voldoen aan de toegankelijkheidswet?
De wet geldt niet voor iedere organisatie en iedere dienst. De precieze kwalificatie hangt af van de organisatie, de dienst en de uitzonderingen. Gebruik de EAA-pagina voor de hoofdlijnen en laat twijfelgevallen juridisch toetsen.
Wat gebeurt er als ik niet voldoe aan de toegankelijkheidswet?
Het toezicht is verdeeld over zes toezichthouders. Voor e-handelsdiensten en veel webshops is de ACM relevant. Houd je dossier actueel: leg vast wat je hebt onderzocht, welke problemen zijn gevonden, welke oplossingen zijn doorgevoerd en wat een hercontrole bevestigt.
Hoe kan een web agency digitale toegankelijkheid het beste aanpakken?
De beste oplossing is: zoek een ervaren auditbureau en ga een samenwerking aan. Laat je meest recente websites onderzoeken. Een audit levert een gedetailleerd rapport op met uitleg en oplossingen die je teamleden ook kunnen toepassen op toekomstige projecten. Zo bouw je kennis op binnen je bedrijf en voorkom je herhaling van dezelfde fouten.
Bel Julia (06-28742275), dan kunnen we samen kijken naar waar je behoefte ligt.
Maar wat betekent dat concreet?
Op basis van onze ervaring in het auditen van websites volgens WCAG 2.1 en 2.2 hebben we een lijst gemaakt met controlepunten die je minimaal moet checken. Deze lijst bevat de meest voorkomende problemen die we op de websites zien. Als je deze fouten niet maakt, heb je al een behoorlijk toegankelijke website.
Zijn sommige begrippen voor jou nieuw? Wil je meer weten over dit onderwerp? Of wil je je team door ons laten trainen? Neem dan contact op met Julia Tol: [email protected].
Meest voorkomende toegankelijkheidsissues
In deze lijst verkorten we de toegankelijkheidsnaam tot een a11y naam.
Header
- Pagina heeft geen
of deze bevat tekst die de pagina niet beschrijft. - lang-attribuut ontbreekt op of bevat een ongeldige waarde.
- Logo: zichtbare tekst staat niet in de a11y naam, interactieve rol en naam ontbreken, linkdoel is onduidelijk, tekst verdwijnt bij zoom tot 200% en 400%.
- Skiplink ontbreekt, is niet zichtbaar bij focus of verwijst niet naar unieke inhoud.
Navigatie
- Links en knoppen zijn niet te bedienen met het toetsenbord.
- Focus is niet zichtbaar, of komt op onzichtbare elementen terecht.
- Focus wordt niet naar het mobiele menu gestuurd, kan het menu verlaten of verplaatst na sluiten van het menu niet naar een logische plek.
- Contrast van tekst is lager dan 4,5:1.
- Bij 200% en 400% zoom gaat content of functionaliteit verloren.
- Content op hover en focus kan niet met ESC worden afgesloten.
- Actieve link is alleen visueel te herkennen, dit is niet in de HTML vastgelegd.
- Relatie tussen links is niet zichtbaar in de HTML (op te lossen met
- of
- Button met dropdown mist aria-expanded-attribuut.
- Hamburgerknop mist aria-expanded-attribuut om de toestand van het menu aan te geven.
- De functie van de hamburgerknop (openen/sluiten) staat niet in de a11y naam.
Zoekfunctie
- Zoekknop of invoerveld hebben geen a11y naam of geen rol.
- Contrast van zoekicoon met achtergrond is lager dan 3,0:1. Ook op hover en focus.
- Contrast van rand invoerveld is lager dan 3,0:1.
- Lijst met suggesties is geen combobox of mist de nodige attributen, bijvoorbeeld het aria-expanded-attribuut.
- Contrast van placeholder-tekst is lager dan 4,5:1 (als de placeholder als label of instructie dient).
- Zichtbare tekst op/bij het invoerveld staat niet in de a11y naam van het invoerveld.
- Focus is zichtbaar op of landt op onzichtbare elementen.
- Niet alle pagina’s of PDF’s zijn via het zoekveld te vinden.
Hoofdinhoud
- Koppen staan niet in
-elementen, niet in de correcte volgorde, -element is voor opmaak gebruikt. - en worden voor opmaak gebruikt of als alternatief voor koppen.
- Opsommingen zijn niet gemarkeerd met
- of
- .
- Meerdere alinea’s staan in één
-element.
- Niet alles wat je op de pagina ziet is in de HTML aanwezig. Denk bijvoorbeeld aan voortgangsbalken en informatie over de voortgang zelf.
Sidebar
- Skiplink slaat de sidebar niet over.
- Filters: groepen checkboxen zijn niet gegroepeerd. Relatie met het groepslabel ontbreekt.
- Filters: aanvinken van checkbox zorgt voor het herladen van de pagina waarbij de focus wordt verplaatst.
- Filters: niet alles is te bedienen met het toetsenbord.
- Filterknop op klein scherm: voldoet niet aan alle eisen (deze zijn hetzelfde als bij een hamburgerknop).
Footer
-element is niet gebruikt voor de kopjes boven kolommen. - Logo’s hebben geen tekstalternatieven.
- Opt-in formulier: invoerveld voor e-mail mist het autocomplete-attribuut.
Dialoogvenster
- role=”dialog” en/of de toegankelijke naam ontbreekt.
- Focus kan het venster verlaten. Focus komt na sluiten van het venster niet terug op de triggerknop of het eerstvolgende element in de DOM.
Accordeons
- De tekst die een accordeon opent is geen
-element. Daarbinnen moet een
Formulieren: login / registratie
- autocomplete op gebruikersnaam en wachtwoord ontbreekt.
- Bezoeker moet puzzel oplossen om in te loggen.
- Knop met oog heeft geen naam en geen rol.
- Correct ingevulde velden worden leeggemaakt als het formulier niet verzonden kan worden.
Formulieren: algemeen
- Er zijn geen permanent zichtbare labels bij invoervelden (placeholder is geen label!).
- Invoervelden of knoppen hebben geen toegankelijke naam.
- Zichtbare tekst op knop of invoerveld staat niet in de toegankelijke naam.
- Foutmeldingen zijn instructies in plaats van dat ze aangeven wat er mis ging.
- Foutmeldingen zijn niet gekoppeld aan de bijbehorende invoervelden (gebruik aria-describedby).
- Focus is niet zichtbaar, landt op onzichtbare elementen of heeft onlogische volgorde.
- Knoppen en invoervelden zijn niet met toetsenbord te bedienen.
- Groepen radiobuttons of checkboxen zijn niet gegroepeerd in de HTML.
- Randen van de invoervelden en tekst (ook placeholder) hebben niet genoeg contrast..
- autocomplete-attribuut ontbreekt op velden die persoonlijke info verzamelen.
- Berichten die de status van de uitgevoerde acties bevestigen hebben geen aria-live region.
Deze punten komen we in elke audit tegen. Dit zijn ongeveer 60% van alle technische fouten die ontwikkelaars regelmatig maken. Laat je website altijd door een expert bekijken om echt alle issues te detecteren.
Hoe een ontwikkelaar een bevinding gebruikt
Een goede bevinding is een werkitem, geen abstracte afkeur. Je moet kunnen zien welk element faalt, hoe je het probleem reproduceert, welke gebruiker hinder ondervindt en welke oplossing je opnieuw kunt testen.
Voorbeeldbevinding: de koppenstructuur klopt niet
#3 – De koppenstructuur klopt niet
Matig
Op deze pagina volgt een kop van niveau 2 direct op een andere kop van niveau 2: “Bouw mee aan jouw talent” en “Zijn dit jouw nieuwe collega’s?”. Koppen horen een logische volgorde te hebben. Een kop wordt niet direct gevolgd door een kop van hetzelfde of een hoger niveau zonder dat er inhoud tussen staat.
User story
Ik lees de website met een schermlezer. Als ik door de koppen navigeer, staan er twee koppen van hetzelfde niveau direct achter elkaar. Ik denk dan dat er inhoud ontbreekt. Ik verwacht dat elke kop een eigen stuk inhoud inleidt.
Hoe te testen
- Open de WCAG Radar en bekijk het niveau van elke kop.
- Controleer of koppen van hetzelfde niveau direct achter elkaar staan zonder inhoud ertussen.
- Controleer met een schermlezer of de koppen logisch worden aangekondigd.
Oplossing
Haal het kopelement weg bij de tekst “Bouw mee aan jouw talent” als die tekst geen eigen inhoud inleidt. Geef de tekst met CSS het uiterlijk van een kop, als dat visueel nodig is.
Wil je digitale toegankelijkheid écht goed aanpakken?
Laat je devteam een training volgen en geef ze de juiste tools en kennis om toegankelijke websites en apps te bouwen. Ze leren hoe ze hun eigen werk kunnen testen en de resultaten correct interpreteren.
Onze training is volledig afgestemd op jouw team en projecten. We analyseren je laatste 3 tot 5 projecten en focussen alleen op de kennishiaten binnen jouw team. Zo krijgen ze precies wat ze nodig hebben om inclusiever te ontwikkelen.
We zijn trots op onze samenwerking met bedrijven als Ilionix, Stichting Rijksmuseum, Plus Retail, Jumbo Supermarkten, Wirelab en vele anderen.
Wil je bespreken wat wij voor jouw team kunnen betekenen? Neem contact op via info@properaccess.nl of bel Julia Tol op 06 2874 22 75.
