Toegankelijkheid van e-shop volgens Wet nr. 424/2023 Sb.: volledige procedure

In juni 2025 wordt wet nr. 424/2023 Coll. van kracht, die de verplichting van digitale toegankelijkheid voor e-shops en online diensten invoert. Deze wet is gebaseerd op EU-richtlijn 2019/882 en moet ervoor zorgen dat digitale diensten voor iedereen toegankelijk zijn - ook voor mensen met een handicap.

De wet is niet alleen van invloed op de publieke sfeer, zoals vroeger, maar ook op commerciële entiteiten zoals exploitanten van e-shops, en daarom is het belangrijk dat u er aandacht aan besteedt. De wet zal op 28 juni 2025 in werking treden.

De wet introduceert nieuwe verplichtingen voor e-shops, maar:

• het voorziet niet in een specifieke technische oplossing, maar verwijst alleen naar de zogenaamde geharmoniseerde standaard (EN 301 549) en de principes van WCAG 2.2,
• toegankelijkheid betekent niet het veranderen van het ontwerp of het verwijderen van functies, maar ervoor zorgen dat iedereen ze kan gebruiken,
• het gaat niet om zware aanpassingen - als je weet wat je moet doen, kun je het doen met een redelijke investering.

Wat zijn de risico's van niet-naleving?

In het geval van niet-naleving van de vereisten van Wet 424/2023 voorziet de wet in de mogelijkheid van sancties. Bedreigingen:

• inspecties door de CTIA op basis van klachten,
• waarschuwingen en oproepen tot corrigerende maatregelen,
• boetes in geval van niet-naleving.

Checklist met vereisten

Om grip te krijgen op toegankelijkheid hebben we juridische analyses, officiële interpretaties en technische normen bekeken. Op basis hiervan hebben we een checklist van 13 punten samengesteld die de vereisten van de geharmoniseerde norm EN 301 549 en de principes van WCAG 2.2 op niveau AA weerspiegelt.

Waar je e-shop aan moet voldoen volgens Wet 424/2023:

We hebben alle webaanpassingen zelf bestudeerd, getest en geïmplementeerd op verschillende projecten met tools zoals NVDA, JAWS, VoiceOver, TalkBack, Wave, LightHouse of axe DevTools. Hier volgt een overzicht van de belangrijkste aandachtsgebieden:

1. Toegankelijkheid via het toetsenbord - de hele site moet navigeerbaar zijn zonder muis.
2. Compatibiliteit met schermlezers - de site moet werken met schermlezers zoals NVDA en VoiceOver, en de semantiek van de broncode zoals rubriekniveaus moet worden gecontroleerd.
3. Tekstalternatieven voor afbeeldingen en media - elke afbeelding moet een betekenisvol alt-bijschrift hebben.
4. Voldoende contrast - kleuren moeten leesbaar zijn voor mensen met een visuele beperking, d.w.z. een minimale contrastverhouding van 4,5:1.
5. Tekstvergroting en responsiviteit - de site moet bruikbaar zijn met een vergroting van 200%, zelfs op mobiele apparaten.
6. Toegankelijke formulieren - elk veld moet een correct label hebben.
7. Logische inhoudsstructuur - koppen, navigatie en knoppen moeten een logische hiërarchie hebben.
8. Paginataal - de taal van de site moet correct worden gedefinieerd met de juiste tag.
9. Zichtbare en duidelijke focus van besturingselementen - actieve besturingselementen moeten altijd duidelijk gelabeld zijn.
10. Grootte van klikbare elementen - knoppen moeten comfortabel zijn, zelfs op een mobiele telefoon met een minimale grootte van 24x24 px.
11. Niet-sleepbare bediening - drag & drop moet een alternatief hebben, bijvoorbeeld in de vorm van bediening via toetsen op het toetsenbord.
12. Consistente hulp en contact - navigatie, contact en hulp moeten altijd beschikbaar zijn.
13. Gepubliceerde toegankelijkheidsverklaring - informatie over naleving en de tools en processen die worden gebruikt om dit te bereiken, moeten openbaar worden weergegeven op een prominente aparte subpagina of in de algemene voorwaarden.

Dit artikel kan dienen als leidraad voor iedereen die ervoor kiest om toegankelijkheid zelf te beheren. Als u de aanpassing van uw e-commercesite zelf wilt aanpakken, raden we u aan de onderstaande checklist te volgen, waarbij u elk deel van de site doorloopt en vaststelt wat moet worden aangepast. Dit omvat de verplichting om een toegankelijkheidsverklaring op te stellen, die sinds 28 juni op de website moet worden gepubliceerd. Volgens de wet moet dit document samenvatten hoe uw e-shop voldoet aan de toegankelijkheidsvereisten en welke hulpmiddelen of procedures u hebt gebruikt om ze te implementeren.

Procedure voor compatibiliteit met de toegankelijkheidsverklaring

Een basissamenvatting van het proces:

1. Begin met het auditen van de site met de genoemde tools.
2. Bekijk de vereisten - test elk punt en corrigeer indien nodig.
3. Raadpleeg de schermlezer en controleer elke wijziging met een geautomatiseerde test.
4. Houd de pagina Voldoen aan vereisten bijgewerkt en geef aan hoe aan specifieke punten is voldaan.
5. Resultaat: de website/e-shop voldoet aan de wet en je onderhoudt deze op een continue basis.

Testen met schermlezers:

Schermlezers

• NVDA (Windows, gratis)
  • NVDA-website (Tsjechisch en Engels)
  • De meest gebruikte schermlezer op Windows, geschikt voor het testen van veelgebruikte websites.
  • Met ondersteuning voor toetsenbordbediening.
• JAWS (Windows, betaald maar wijdverbreid)
  • JAWS-website
  • Professionele oplossing voor blinden, ondersteunt complexe webapplicaties.
• VoiceOver (macOS/iOS, gratis)
  • Ingebouwde voorlezer in MacBook/iPhone/iPad.
  • Activering in toegankelijkheidsinstellingen.
• TalkBack (Android, gratis)
  • Ingebouwde reader op Android-telefoons
  • Activering in instellingen -> Toegankelijkheid.

Testgidsen

• Webtests met NVDA (WebAIM)
• Aan de slag met VoiceOver op de Mac

Toegankelijkheidstestprogramma's:

• Gebruikt om snel te controleren op basisproblemen.
  • axe DevTools (Chrome/Firefox-extensie)
  • Lighthouse (hulpmiddel in Chrome DevTools)
  • WAVE: online controle hier

Controleprocedure en workarounds indien nodig

1. Toegankelijkheid toetsenbord

• Taak: Alle functies en navigatie moeten alleen bruikbaar zijn via het toetsenbord (Tab, Enter, Spatiebalk, Pijltjestoetsen).
• Implementatie:
  • Test het navigeren (Tab/Shift Tab) door alle besturingselementen.
  • Gebruik geen niet-standaard widgets zonder de juiste ARIA-labeling.
  • Stel tabindex correct in waar nodig.
  • Blokkeer gebruikers niet in modale vensters.

2. Compatibiliteit met schermlezers

• Taak: Controleer of de site goed leesbaar en navigeerbaar is met schermlezers, en corrigeer indien nodig volgens de toegankelijkheidsrichtlijnen
• Implementatie:
  • Er worden semantische HTML-tags (<h1>, <nav>, <main>, <button>, <label>, etc.) gebruikt.
  • Elke afbeelding heeft een betekenisvol alt-attribuut.
  • Alle formulierelementen hebben een bijbehorend <label>.
  • Grafische elementen en pictogrammen worden niet gebruikt zonder tekstuele beschrijving; verborgen tekst of ARIA-labels worden waar nodig toegevoegd.
  • Koppen gebruiken het juiste niveau (<h1>, <h2>, ... zonder niveaus over te slaan).
  • Dynamische inhoud (modale vensters, dialogen) wordt gemarkeerd met ARIA-attributen (bijv. role="dialog", aria-live).
  • De paginataal is correct ingesteld (bijv. <html lang="nl">).
  • Het menu staat in <nav> en is beschreven voor schermlezers (aria-label="hoofdnavigatie").
  • De navigatielinks hebben beschrijvende namen.

3. Tekstalternatieven voor afbeeldingen en media

• Taak: Elke afbeelding moet een betekenisvol alt-attribuut hebben. Decoratieve afbeeldingen moeten een leeg alt="" hebben (visuele scheidingstekens, herhalende illustratiepictogrammen, grafische achtergronden, enz.)
• Implementatie:
  • Controleer HTML/templates, controleer afbeeldingen.
  • Alt-attributen toevoegen of bewerken.
  • Video's van tekst voorzien of transcriberen.

4. Voldoende kleurcontrast

• Taak: Tekst en bedieningselementen moeten duidelijk leesbaar zijn (minimale contrastverhouding 4,5:1).
• Uitvoering:
  • Controleer de hoofdkleuren via WebAIM Contrast Checker.
  • Pas de kleuren in de CSS aan als dat nodig is.

5. Tekstvergroting en responsiviteit

• Uitdaging: De website moet werken met tekstvergroting tot 200% en op alle apparaten.
• Implementatie:
  • Gebruik relatieve eenheden (em, rem, %) in plaats van px (voor maximale compatibiliteit tussen apparaten, browsers en ondersteunende technologieën).
  • Test zoom in de browser.
  • Test het gedrag op mobiel/tablet (responsief ontwerp).

6. Toegankelijke formulieren

• Taak: Elk invoerelement heeft een bijbehorende , foutmeldingen zijn duidelijk.
• Implementatie:
  • Bekijk alle formulieren.
  • Elk veld moet een zichtbaar label hebben.
  • Foutmeldingen moeten beschikbaar zijn voor lezers (aria-live, role="alert").

7. Logische structuur van de inhoud

• Uitdaging: Juist gebruik van tags (header, nav, main, footer, button, label, etc.), gebruiker kan gemakkelijk door de inhoud navigeren, navigatie-elementen zijn duidelijk en voorspelbaar.
• Implementatie:
  • Doorloop de HTML, controleer de juiste hiërarchie van koppen (<h1>, <h2>, ...).
  • Gebruik van knoppen <button>.
  • Menu staat in <nav> en is beschreven voor lezers (aria-label="Hoofdnavigatie")
  • Code valideren: W3C-validator

8. Benaming paginataal

• Taak: De hele pagina verklaart de hoofdtaal met <html lang="nl">.
• Implementatie:
  • Controleer de paginasjabloon.
  • Markeer de wijziging in het geval van inhoud in een vreemde taal.

9. Focus - zichtbaar, voldoende zichtbaar

• Taak: De focus van de besturingselementen moet altijd zichtbaar zijn, mag niet overlaags zijn en moet voldoende zichtbaar zijn (bijv. kader, kleurverandering).
• Uitvoering:
  • Controleer de zichtbaarheid van de focus op alle interactieve elementen (knoppen, links, formulieren). Zorg ervoor dat de focus niet over andere elementen heen ligt
  • Pas CSS aan zodat de focus duidelijk zichtbaar is (contour, boxschaduw of rand).
  • Controleer dit met een toetsenbordbesturing (Tab/Shift Tab).

10. Minimale doelgrootte

• Taak: Knoppen en bedieningselementen moeten minimaal 24×24 px zijn, zodat ze comfortabel kunnen worden bediend op aanraakapparaten.
• Implementatie:
  • Controleer of elk aanklikbaar element (knoppen, pictogrammen, menulinks...):
    • ofwel de grootte zelf ten minste 24×24 px is
    • of voldoende opvulling heeft om de resulterende klikbare ruimte te vergroten
  • Test op aanraakapparaten (mobiel, tablet) of het element comfortabel kan worden ingedrukt zonder risico op fouten.
  • Als het technisch niet mogelijk is om te vergroten (bijvoorbeeld vanwege het ontwerp), wordt aanbevolen om het actieve gebied van het besturingselement te vergroten.
• Hieraan hoeft niet te worden voldaan wanneer:
  • De functie kan worden bereikt met een ander besturingselement op dezelfde pagina dat aan dit criterium voldoet.
  • Het doel in een zin staat of de grootte anderszins wordt beperkt door de hoogte van een regel tekst die niet het doel is.
  • Alle uitzonderingen

11. Besturing zonder slepen

• Doel: Functies op de site mogen niet alleen afhankelijk zijn van drag & drop. De gebruiker moet deze functies op andere manieren kunnen bedienen - bijvoorbeeld door te klikken of met het toetsenbord.
• Implementatie:
  • Controleer de functionaliteit zonder muis, met alleen het toetsenbord en in een schermleesomgeving.
  • Als er geen alternatief beschikbaar is, moet de functie worden heroverwogen of opnieuw worden ontworpen.

12. Help, navigatie, contactopties

• Taak: Als een site contact- of ondersteuningsopties biedt (zoals e-mail, help, chat), moeten deze toegankelijk zijn en consistent op alle pagina's worden geplaatst. Hetzelfde geldt voor navigatie, hulp, enz.
• Implementatie:
  • Zorg ervoor dat ondersteunende elementen (navigatie, contactpersonen...) aanwezig zijn:
    • zichtbaar, toegankelijk en functioneel
    • consistent zijn geplaatst op alle pagina's van de site
  • Verifieer wanneer deze alleen met het toetsenbord wordt bediend.

13. Toegankelijkheidsinformatie in openbare documenten

• Taak: Publiceer informatie over het voldoen aan toegankelijkheidsvereisten in de algemene voorwaarden of op het web.
• Uitvoering:
  • Geef een beschrijving van hoe de dienst voldoet aan toegankelijkheidseisen in de algemene voorwaarden of op een aparte pagina.
  • Geef informatie op verzoek in audiovorm.
  • Zorg ervoor dat de informatie in een toegankelijk formaat is (leesbare tekst, niet alleen een afbeelding).