zekertoegankelijk.nl

Kennisbank

Hoe maak ik mijn Magento-webshop (Adobe Commerce) EAA-conform?

Magento-shops zijn vaak zwaar aangepast op maat, dus of uw shop voldoet aan de European Accessibility Act (EAA), de Europese wet die producten en diensten toegankelijk maakt, hangt sterker dan bij andere platforms af van hoe uw thema en extensies zijn gebouwd, en door wie.

Uw thema bepaalt het startpunt: Luma of Hyvä

Het standaardthema Luma is van huis uit niet toegankelijk. In de code zitten bekende knelpunten die het niet vanzelf aan WCAG 2.1 AA laten voldoen: te weinig contrast op knoppen zoals "In winkelwagen", swatch-opties (de kleur- en maatkeuzes bij een product) die niet met het toetsenbord te bedienen zijn en geen naam voor een schermlezer hebben, en filters die in de broncode ná de productlijst staan, waardoor een schermlezer eerst alle producten voorleest. Luma doet ook een paar dingen goed, zoals een "sla over naar inhoud"-link, maar als geheel is het geen conforme basis.

Het populaire alternatief Hyvä is wél met toegankelijkheid als uitgangspunt gebouwd: vanaf versie 1.3.0 volgt het thema van huis uit WCAG 2.1 AA, met aandacht voor contrast, focus en semantische opbouw. De toegankelijkheidsdocumentatie van Hyvä (opent in nieuw tabblad) beschrijft dat per onderdeel. Dat is een startpunt, geen garantie voor uw hele shop. Uw eigen content, uw maatwerk en uw extensies bepalen het eindresultaat, en die zijn niet automatisch toegankelijk, ook niet op Hyvä. In de praktijk laten de meeste Magento-shops hun thema bouwen of aanpassen door een ontwikkelbureau. Werkt u met zo'n bureau, leg toegankelijkheid dan expliciet bij hen neer: vraag om een oplevering die aantoonbaar tegen WCAG 2.1 AA is getoetst, en om herstel van wat daar niet aan voldoet.

Bekende knelpunten in Magento-webshops

Een paar plekken keren vaak terug. Sale- en actielabels op productlijsten hebben regelmatig te weinig contrast. De gelaagde navigatie (layered navigation) op categoriepagina's, met filters voor merk, maat of prijs, is vaak lastig met het toetsenbord te bedienen als de filters als losse checkbox-widgets zijn gebouwd zonder duidelijke koppeling aan hun label. En het meerstaps bestelproces (verzending, facturering, betaling) heeft, zeker na maatwerkaanpassingen, op elke stap zichtbare focus en correct gekoppelde formulierlabels nodig.

Extensies kunnen problemen terugbrengen

Modules en extensies uit de Adobe Commerce Marketplace, voor bijvoorbeeld betaalmethoden, productfilters of upsells, voegen elk hun eigen HTML toe. Niet elke extensie is even zorgvuldig gebouwd, en een nieuwe of bijgewerkte extensie kan opnieuw contrast-, label- of toetsenbordproblemen introduceren op een shop die eerder in orde was. Laat een extensie daarom meenemen in uw reguliere toegankelijkheidstoets.

Een overlay-extensie is geen oplossing

Ook voor Magento worden toegankelijkheidsoverlays aangeboden als los script of extensie. Dat lost het onderliggende probleem niet op: een overlay maakt uw shop niet EAA-conform, op geen enkel platform. De norm wordt getoetst tegen EN 301 549, de technische norm waaraan een toegankelijke website moet voldoen, en die toets kijkt naar de broncode van uw thema en extensies zelf, niet naar een laagje eroverheen.

Wilt u weten wat WCAG 2.1 AA concreet van uw webshop vraagt? Of bekijk hoe de aanpak verschilt per webshopplatform. Een gratis expertscan van uw homepage laat zien waar uw Magento-thema en extensies nu staan, of start met een volledige nulmeting voor een geprioriteerde bevindingenlijst.

En los van de plicht loont dit: een toegankelijke shop bereikt meer klanten en is voorbereid op het web waarin ook software namens klanten bestelt.

Veelgestelde vragen

Is het standaardthema Luma toegankelijk?

Van huis uit niet. Luma heeft bekende knelpunten, zoals te laag contrast op knoppen en swatch-opties die niet met het toetsenbord werken. Het alternatief Hyvä volgt vanaf versie 1.3.0 wel WCAG 2.1 AA als uitgangspunt, maar ook dan bepalen uw content, maatwerk en extensies het eindresultaat.

Ik werk met een ontwikkelbureau voor mijn Magento-shop. Wat moet ik doen?

Leg toegankelijkheid expliciet bij hen neer. De meeste Magento-shops draaien op maatwerk dat een bureau bouwt. Vraag om een oplevering die aantoonbaar tegen WCAG 2.1 AA is getoetst, en om herstel van wat daar niet aan voldoet. De wettelijke verantwoordelijkheid blijft bij u als dienstverlener, maar het werk kunt u beleggen.

Is de gelaagde navigatie op categoriepagina's een bekend knelpunt?

Vaak wel. Filters voor merk, maat of prijs worden regelmatig als checkbox-widgets gebouwd die niet duidelijk aan hun label gekoppeld zijn of lastig met het toetsenbord te bedienen zijn. Dit verdient extra aandacht bij een toegankelijkheidstoets.

Maken Magento-extensies mijn shop minder toegankelijk?

Dat kan. Extensies uit de Adobe Commerce Marketplace voegen eigen HTML toe die contrast, labels of toetsenbordvolgorde kan verstoren. Neem elke nieuwe of bijgewerkte extensie mee in uw toegankelijkheidstoets.

Moet ik van Magento wisselen om EAA-conform te worden?

Meestal niet. Toegankelijkheid zit in uw thema en extensies, niet in Magento zelf. Een meting laat zien of de knelpunten in uw huidige maatwerk zitten, voordat u een overstap overweegt.

Bronnen: WCAG 2.1 (W3C) (opent in nieuw tabblad) · EN 301 549 (ETSI) (opent in nieuw tabblad) · Magento 2 toegankelijkheidsissue (GitHub) (opent in nieuw tabblad) · Hyvä-documentatie over toegankelijkheid (opent in nieuw tabblad)

Hoe het werkt

Van eerste inzicht naar actueel bewijs.

  1. STAP 01

    Gratis expertscan

    € 0, geen verplichtingen

    Een specialist beoordeelt uw homepage en stuurt de belangrijkste bevindingen in begrijpelijke taal.

    Gratis scan inplannen
  2. STAP 02

    Nulmeting

    € 1.950 eenmalig

    Een volledige baseline volgens WCAG-EM: rapporten voor directie, projectleiding en ontwikkelteam, een geprioriteerde herstellijst en een publiceerbare toegankelijkheidsverklaring.

    Meer over de nulmeting
  3. Jaarplan

    STAP 03

    Onderhouden

    Vanaf € 349 per maand

    Periodieke audits met hertesten en een verklaring die actueel blijft wanneer uw site verandert.

    Bekijk de abonnementen