Maak een afspraak

Kom bij ons werken. We zoeken een Data-analist! Bekijk de vacature

Is jouw webshop toegankelijk voor iedereen? Gebruik deze checklist!

01-02-2023 - 8 minuten leestijd

Vanaf 28 juni 2025 gaat de European Accessibility Act (EAA) van start. Deze wet moet ervoor zorgen dat deze grote groep mensen producten en diensten net zo gemakkelijk kunnen 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 UX designer Niels van der Leeuw en Developer Yuran van den Bosch 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 altijd op de juiste manier toegankelijk is.

Voor wie is deze wetgeving van toepassing?

  • 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 Screen Readers om de webpagina’s te kunnen lezen. Deze Screen Readers 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 Screen Reader 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. Developer Yuran van den Bosch je uit waar je op moet letten om aan de EAA-wetgeving te voldoen en jouw webshop toegankelijk te maken voor iedereen:

Lang attribuut

Het lang attribuut wordt gebruikt om onder andere aan te geven aan een screen reader welke taal te gebruiken. Het lang attribuut 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 screen reader 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>


Alt

Het alt attribuut wordt onder andere gebruikt door screenreaders om afbeeldingen te omschrijven, zodat de afbeelding kan worden opgelezen. Als je een afkorting gebruikt die per letter uitgesproken moet worden, zorg er dan voor dat je de tekst in hoofdletters schrijft zodat de letters afzonderlijk worden voorgelezen. 

afbeelding van een hond die met een bal speelt

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 elementen heeft de rol “navigation”.

Voorbeelden van roles:

  • Button
  • Checkbox
  • Link
  • Radiogroup
  • Radio
  • Searchbox
  • Tooltip

Landmarks

Landmarks zijn HTML5 semantische elementen die een screen reader direct kan vertellen wat de functie is van een HTML element. Deze landmark elementen bezitten automatisch een role attribuut die gebruikt wordt door screenreaders.

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 bijv. “Navigatie”. Het Aria label geeft extra informatie of een “naam” zoals bijv. “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 is over het algemeen alleen nodig voor elementen die geen text content bezitten (text content wordt gelezen door de speech reader).

Voorbeeldcode ARIA

Voorbeelden:

  • 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 textcontent van andere elementen gebruiken om het gelabelde element te omschrijven door middel van een ID.

… Even tussendoor: we sturen elke drie weken een nieuwsbrief met daarin de laatste blogs, teamupdates en natuurlijk nieuws over het aanbod in onze academy. Klik hier om je in te schrijven.


Aanmelden nieuwsbrief

De toegankelijkheid checklist

Ga je werken aan de toegankelijkheid van je website of webshop? Hieronder vind je een checklist die je kunt gebruiken als bureaublad achtergrond of kunt doorsturen naar je content-team.

De Toegankelijkheid Checklist

De Toegankelijkheid Checklist

Omdat deze checklist niet voorgelezen kan worden door screen readers hebben we de volledige checklist hieronder uitgeschreven. Goed om te weten: gebruik altijd de bulletpoints/genummerde lijst uit de webeditor in plaats van geïmporteerde symbool. Dit helpt bij het correct identificeren en vertalen van lijsten door screen readers.

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 de door hun gekozen apparaat?
  • Kan een gebruiker de website gebruiken in zowel “Landscape” als “Portrait” modus?

Afbeeldingen

  • Maken afbeeldingen gebruik van “Alt-teksten” zodat screen readers 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 ontwikkelt dat er gebruik gemaakt kan worden van “Auto-fill”?

Wat betekent dit voor jouw e-commerce webshop?

De Europese wet moet ervoor zorgen dat iedereen met een beperking ten alle 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 meer hulp bij nodig? Neem dan vooral contact met ons op.

Bronnen

https://www.frankwatching.com/archive/2022/11/15/european-accessibility-act-webshops/
https://digitaaltoegankelijk.nl/nieuws/european-accessibility-act-2025/
https://ec.europa.eu/social/main.jsp?catId=1202&intPageId=5581&langId=en
https://technobility.nl/blog/digitale-toegankelijkheid-webshops/#:~:text=Wettelijke%20verplichtingen%20webshops%20en%20digitale,voor%20online%20bedrijven%2C%20zoals%20webshops
https://dequeuniversity.com/assets/pdf/module-design/dq-designers-checklist.pdf
https://webaim.org/resources/contrastchecker/
https://level-level.com/nl/webwinkel-onderzoek-2021/
https://www.w3.org/TR/WCAG21/ 

Deze blogs vind je vast ook interessant