Filter
ChatGPT Zo maak je je webshop toegankelijk voor iedereen [handige checklist]
Vanaf 28 juni 2025 gaat de European Accessibility Act (EAA) van start. Deze wet voor toegankelijkheid moet ervoor zorgen dat een grote groep mensen met een beperking producten en diensten net zo gemakkelijk gebruiken als mensen zonder een beperking. De EAA verplicht ook webshops om toegankelijk te zijn en is gebaseerd op de WCAG 2.1-richtlijnen*. In dit artikel leggen we uit wat dit voor jouw webshop betekent en waar je op moet letten om aan de EAA-wetgeving** te voldoen.
Voor wie is de European Accessibility Act van toepassing?
In Nederland kennen we ongeveer 4 miljoen mensen met een beperking. Denk hierbij bijvoorbeeld aan mensen met een visuele beperking of mensen die door een lichamelijke beperking geen muis en/of toetsenbord kunnen gebruiken. Uit een onderzoek van Level-Level is gebleken dat zelfs grote partijen zoals Jumbo, Mediamarkt en Hema het nog niet lukt om ook deze groep mensen te helpen met bijvoorbeeld het doen van een bestelling. Daarom wordt het de komende jaren alleen maar belangrijker om jouw website, product of dienst op de juiste manier in te richten, zodat deze óók voor deze groep mensen altijd op de juiste manier toegankelijk is.
De EEA-wetgeving gaat gelden voor:
- Webshops
- Telecommunicatiediensten, zoals de apps en websites van je provider
- Audiovisuele diensten, zoals Netflix, Videoland en Spotify
- Online en offline diensten die te maken hebben met transport, zoals apps en websites
- Overig, bijvoorbeeld: besturingssoftware, pinautomaten, smartphones, etcetera
JavaScript Screen Reader Accessibility
Mensen met een visuele beperking zijn vaak afhankelijk van screenreaders om webpagina’s te kunnen lezen. Deze screenreaders vertalen visuele pagina’s in (gesproken of voelbare) tekst. Bij het maken van een visuele webpagina houd je rekening met fontgrootte, een foto die past bij je verhaal, hoeveelheid van afbeeldingen, etc. Maar mensen die gebruik maken van een screenreader zijn afhankelijk van de data die je de visuele onderdelen meegeeft. Daarom is het belangrijk dat je bewust nadenkt over de attributen op je pagina. We lichten ze hieronder toe:
Het lang attribuut
Het lang attribuut wordt gebruikt om onder andere aan een screenreader aan te geven welke taal die moet gebruiken. Dit wordt in het HTML-element gebruikt om aan te geven in welke taal de pagina is geschreven.
Voorbeeld:
<html lang=”nl”>
Het lang attribuut kan ook gebruikt worden in losse elementen om de screenreader te laten weten dat het element afwijkt van de taal die het HTML-element aangeeft.
Voorbeeld:
<html lang=”nl”>
<body>
<p>Welkom op onze website!</p>
<p lang=”en”>Welcome to our webpage!</p>
<p lang=”de”>Willkommen auf unserer Webseite!</p>
Het alt-attribuut
Het alt-attribuut wordt onder andere gebruikt door screenreaders om afbeeldingen te omschrijven, zodat de afbeelding kan worden opgelezen.
Voorbeeld van ALT-tekst die past bij deze pagina: afbeelding van een hond die met een bal speelt
Voorbeeld:
<img src=”url” alt=”afbeelding van een hond die met een bal speelt” />
Roles
Roles is een HTML-attribuut die de functie aangeeft van een element. Veel elementen bezitten dit attribuut automatisch al. Een radio-button heeft bijvoorbeeld automatisch al de rol “radio” en het nav-element heeft de rol “navigation”.
Voorbeelden van roles:
- Button
- Checkbox
- Link
- Radiogroup
- Radio
- Searchbox
- Tooltip
Landmarks
Landmarks zijn HTML5 semantische elementen die een screenreader direct kan vertellen wat de functie is van een HTML-element. Deze landmark-elementen bezitten automatisch een role-attribuut die gebruikt wordt door screenreaders.
Voorbeelden van landmark-elementen:
- Header
- Aside
- Nav
- Main
- Footer
ARIA
ARIA staat voor Accessible Rich Internet Applications, en is een set van technische specificaties die webontwikkelaars kunnen toepassen om de toegankelijkheid van hun websites en webapplicaties te verbeteren voor mensen met een beperking. Dit kan bijvoorbeeld door het toevoegen van extra informatie over elementen op een website, zoals beschrijvingen van afbeeldingen. Of het aangeven van de rol van een knop, zodat gebruikers met een schermlezer of andere hulpmiddelen de inhoud beter kunnen begrijpen.
ARIA kan ook worden gebruikt om de interactie van een website te verbeteren, bijvoorbeeld door aan te geven welk element op dat moment het actieve element is, zodat gebruikers met een beperking weten waar ze zich bevinden op de website.
ARIA-label
Waar het role-attribuut de functie aangeeft van het element, zoals “navigatie”, geeft het ARIA-label extra informatie of een “naam”. Bijvoorbeeld “main navigatie” of “social media navigatie”.
Het ARIA-label helpt de gebruikers van screenreaders het beste te navigeren door de website en kan gebruikt worden op alle elementen. Maar het is over het algemeen alleen nodig voor elementen die geen text content bezitten (text content wordt gelezen door de speech reader).
Voorbeelden van ARIA-labels:
- Select-element met label “Telefoonnummer land code”
- Input-element met label “Uw naam”
- Nav-element met label “Prima”
- Button met textcontent “Send” en label “Send email”
ARIA-labelledby
Met het Aria-labelledby kan je het text content van andere elementen gebruiken om het gelabelde element te omschrijven door middel van een ID.
De toegankelijkheid-checklist
Ga je werken aan de toegankelijkheid van je website of webshop? Hieronder vind je een checklist die je kunt gebruiken als bureaubladachtergrond of kunt doorsturen naar je content-team (klik op de afbeelding voor een grotere versie).
Omdat deze checklist voor toegankelijkheid niet voorgelezen kan worden door screenreaders hebben we de volledige checklist hieronder uitgeschreven. Goed om te weten: gebruik bij een opsomming of checklist altijd de bulletpoints/genummerde lijst uit de webeditor in plaats van geïmporteerde symbolen. Dit helpt bij het correct identificeren en vertalen van lijsten door screenreaders.
Titels
- Beschrijft de titel van de pagina wat het doel of onderwerp van de pagina is?
- Zien titels die titels zijn er ook zo uit?
- Is er een hiërarchische opbouw gemaakt tussen de titels?
Navigatie
- Is er een methode om herhaalde navigatie over te slaan en direct naar de content van de pagina toe te navigeren? (Inclusief HTML/ARIA-landmarks)
Links
- Beschrijft de linktekst het uiteindelijke doel of de bestemming van de link?
Kleur/Contrast
- Wordt informatie overgebracht zonder alleen gebruik te maken van kleur? Denk bijvoorbeeld aan een error-melding in een invoerveld, die zowel met kleur als tekst wordt ondersteund.
- Heeft alle tekst een minimale contrastwaarde van 4.5/1 (of 3/1 voor grote tekst)? Je kunt de contrastwaarde van jouw gekozen kleuren gebruiken met de tool van WebAIM.
- Is een link te herkennen en te onderscheiden aan meer dan alleen de kleur van de tekst?
- Hebben elementen een duidelijke focus om er voor te zorgen dat mensen die geen muis gebruiken weten welk element actief is?
Inzoomen / Responsiviteit
- Kan een gebruiker de website vergroten / inzoomen op het door hun gekozen apparaat?
- Kan een gebruiker de website gebruiken in zowel “Landscape”- als “Portrait”-modus?
Afbeeldingen
- Maken afbeeldingen gebruik van “Alt-teksten” zodat screenreaders kunnen beschrijven waar de afbeelding over gaat?
- Is content geplaatst op de website en niet ingesloten in een afbeelding? (met uitzondering van logo’s)
Formulieren
- Hebben alle invoervelden een label dat altijd zichtbaar is voor de gebruiker?
- Indien nodig, zijn alle elementen aanwezig in de buurt van het invoerveld waar een gebruiker wijzigingen mee kan maken? Denk hierbij aan een “Bewerken”- of “Verwijderen”-knop
- Zijn de formulieren zo ontwikkeld dat er gebruik gemaakt kan worden van “Auto-fill”?
Wat betekent de EAA-wetgeving voor jouw e-commerce-webshop?
De Europese wet moet ervoor zorgen dat iedereen met een beperking te allen tijden net zo gemakkelijk gebruik kan maken van jouw webshop, als iemand zonder een beperking. Gebruikers van jouw webshop moeten de inhoud en structuur hiervan kunnen raadplegen en door webpagina’s kunnen navigeren, met behulp van de hulpmiddelen die zij nodig hebben. Denk bijvoorbeeld aan een screenreader, die de content op een pagina voorleest aan slechtziende mensen. Wil je meer weten over deze wetgeving, neem dan een kijkje op de officiële website waar alles met betrekking tot de European Accessibility Act terug te vinden is.
Wil je je alvast voorbereiden op de wetgeving én er voor zorgen dat iedereen op een toegankelijke manier gebruik kan maken van jouw website? Volg dan de toegankelijkheid-checklist en probeer aan zoveel mogelijk punten te voldoen. Heb je hier vragen over? Stel ze in de reacties hieronder!
Bronnen inleiding: *W3.org, **European Commission
Over de auteurs
