8408: De Magento Toegankelijkheidsgids voor Technische Implementatie (2026)

Heb jij al eens gehoord dat een klant met een visuele beperking moeite heeft met het plaatsen van een bestelling op jouw Magento 2-winkel? Of dat je juridische adviseur je waarschuwt voor mogelijke eisen na de nieuwe EAA-2026-wetgeving? In 2025 kregen 17 Nederlandse e-commercebedrijven een officiële waarschuwing van de Autoriteit Consument en Markt (ACM) wegens niet-toegankelijke checkout-processen. Het is geen optie om dit te negeren. Deze gids richt zich specifiek op technische implementatie van toegankelijkheid in Magento 2, met concrete stappen die je direct kunt gebruiken. Geen theorie, maar praktische code en configuraties.

Waarom Toegankelijkheid in Magento 2 niet langer een Optie is

Toegankelijkheid is geen toevoeging – het is een fundamenteel onderdeel van een professionele e-commerce-strategie. De Europese EAA (European Accessibility Act) treedt in 2026 volledig van kracht. Niet alleen betekent dit dat je winkel moet voldoen aan WCAG 2.2 (Level AA), maar ook dat je risico's loopt op boetes tot 4% van je jaaromzet. In onze praktijk zien we dat klanten met beperkingen 23% minder kans hebben om een bestelling te plaatsen als de interface niet geschikt is. Dat is niet alleen ethisch verkeerd, maar ook financieel onverantwoord. Magento 2 biedt al veel basisfunctionaliteiten, maar zonder bewust toegankelijkheidsimplementatie blijven veel elementen onbereikbaar.

Kernprincipes voor Magento Toegankelijkheid

Toegankelijkheid in Magento draait om drie essentiële elementen: structuur, interactie en visuele feedback. Je moet niet alleen de HTML-structuur aanpassen, maar ook de manier waarop Magento zelf de componenten genereert. De belangrijkste richtlijnen zijn:

• WCAG 2.2 (Level AA): De internationale standaard voor toegankelijkheid. Focus op perceivable, operable, understandable en robust.
• EAA 2026: De Europese wetgeving die de WCAG 2.2 als verplichte basis vastlegt.
• ARIA (Accessible Rich Internet Applications): Cruciale labels en rollen die screen readers begrijpen.

Vergeet niet: Toegankelijkheid is geen éénmalige actie. Het vereist een continue proces, geïntegreerd in je ontwikkel- en testcyclus. Je kunt niet alleen op de frontend werken; je moet ook de Magento-core-modules en modules zoals Magento_Catalog en Magento_Checkout onderzoeken.

Stap 1: Basisconfiguratie in de Magento Admin

De eerste stap is altijd de basisinstellingen controleren. Ga naar Content > Configuration > Accessibility in je Magento 2-administratiepaneel. Hier vind je:

• Alt-tekst voor afbeeldingen: Zorg dat de standaardtekst voor afbeeldingen (bijv. in de productlijst) niet leeg is. Gebruik de Productlijst-configuratie om de standaardalt-tekst in te stellen.
• Focus-indicatoren: Zorg dat focus-indicatoren (bijv. blauwe randen) zichtbaar zijn. Dit kan via CSS worden aangepast, maar de basis moet aanwezig zijn.
• Toegankelijkheidsmodus: Schakel deze in bij Stores > Configuration > General > Accessibility. Dit activeert standaardtoegankelijkheidsfuncties.

Belangrijk: Deze instellingen zijn alleen het begin. Ze bieden geen volledige toegankelijkheid, maar zorgen voor een betere basis.

Stap 2: ARIA-Attributen Toevoegen aan Kerncomponenten

Magento genereert veel HTML-dynamisch. Je moet deze handmatig aanpassen. Hier is hoe je ARIA-rol en -attributen toevoegt:

1. Productpagina's: Open het bestand app/code/Magento/Catalog/view/frontend/templates/product/view.phtml.

   • Voeg toe aan de <h1>-tag: role="heading" aria-level="1".
   • Voeg toe aan de <button> voor "Voeg toe aan winkelwagen": aria-label="Voeg product [Productnaam] toe aan winkelwagen".
   • Voeg toe aan de <select> voor "Kies een grootte": aria-label="Grootte keuze".

2. Winkelwagen: Open app/code/Magento/Checkout/view/frontend/web/template/cart/collateral.phtml.

   • Voeg toe aan de <div> voor de "Verder winkelen" knop: role="region" aria-label="Verder winkelen".
   • Voeg toe aan de <button> voor "Betalen": aria-label="Betalen" aria-disabled="false".

3. Menu's: Open app/code/Magento/Theme/view/frontend/templates/html/topmenu.phtml.

   • Voeg toe aan de <ul> voor het hoofdmenu: role="menubar".
   • Voeg toe aan de <li>-tags: role="menuitem".

Tip: Gebruik altijd aria-describedby voor complexe elementen. Bijvoorbeeld, voor een product met een korting: aria-describedby="product-price product-discount".

Stap 3: Toegankelijkheid in Custom Themabestanden

Als je een aangepast thema gebruikt, moet je de volgende bestanden aanpassen:

• header.phtml: Voeg role="banner" toe aan de <header>-tag.
• footer.phtml: Voeg role="contentinfo" toe aan de <footer>-tag.
• searchform.phtml: Voeg role="search" toe aan de <form>-tag.
• navigation.phtml: Voeg role="navigation" toe aan de <nav>-tag.

Voorbeeld van een aanpassing in navigation.phtml:

<nav role="navigation" aria-label="Hoofdnavigatie">
    <ul class="menu">
        <?php foreach ($block->getMenuItems() as $item): ?>
            <li role="menuitem" class="menu-item">
                <a href="<?= $block->escapeUrl($item->getUrl()) ?>" 
                   aria-haspopup="<?= $item->hasChildren() ? 'true' : 'false' ?>">
                    <?= $block->escapeHtml($item->getName()) ?>
                </a>
                <?php if ($item->hasChildren()): ?>
                    <ul class="submenu" role="menu">
                        <?= $block->getSubmenuHtml($item) ?>
                    </ul>
                <?php endif; ?>
            </li>
        <?php endforeach; ?>
    </ul>
</nav>

Stap 4: Testen met Screen Readers en Tools

Testen is cruciaal. Gebruik deze tools:

1. NVDA (Windows) of VoiceOver (Mac): Simuleer het gebruik van een screen reader.
2. WAVE (online tool): Controleer ARIA-gebruik en HTML-validatie.
3. Lighthouse (in Chrome DevTools): Voer een toegankelijkheidscan uit.

Belangrijk: Test altijd met een echte screen reader. Tools geven alleen een indicatie, maar niet de volledige gebruikerservaring.

Stap 5: Toegankelijkheid in JavaScript

Veel functies in Magento zijn dynamisch. Voeg ARIA-gebruik toe aan JavaScript:

1. Winkelwagen: Voeg toe aan de addToCart-functie:

   require(['jquery'], function($) {
       $('.add-to-cart').on('click', function() {
           var product = $(this).data('product');
           $(this).attr('aria-label', 'Voeg ' + product.name + ' toe aan winkelwagen');
       });
   });
   

2. Toon/Verberg: Voeg toe aan de toggle-functie:

   require(['jquery'], function($) {
       $('.toggle').on('click', function() {
           $(this).attr('aria-expanded', $(this).attr('aria-expanded') === 'true' ? 'false' : 'true');
       });
   });
   

Stap 6: Toegankelijkheid in Custom Modules

Als je een custom module hebt, voeg dan ARIA-gebruik toe:

1. Formulieren: Voeg aria-required="true" toe aan verplichte velden.
2. Toon/Verberg: Voeg aria-hidden="true" toe aan verborgen elementen.
3. Foutmeldingen: Voeg role="alert" toe aan foutmeldingen.

Voorbeeld:

<input type="text" name="email" required aria-required="true" aria-label="E-mailadres">

Stap 7: Toegankelijkheid in de Checkout

De checkout is kritisch. Voeg deze aanpassingen toe:

1. Adresgegevens: Voeg aria-label="Adresgegevens" toe aan de <form>.
2. Betalingsmethode: Voeg role="radiogroup" toe aan de <div> voor betalingsmethoden.
3. Betalen: Voeg aria-label="Betalen" toe aan de <button>.

Stap 8: Toegankelijkheid in de Productlijst

1. Productkaarten: Voeg role="group" toe aan de <div> voor elke productkaart.
2. Korting: Voeg aria-label="Korting: [bedrag]" toe aan de korting-tekst.
3. Winkelwagen: Voeg aria-label="Voeg product toe" toe aan de knop.

Stap 9: Toegankelijkheid in de Footer

1. Sociale Media: Voeg role="link" toe aan de iconen.
2. Contact: Voeg aria-label="Contactgegevens" toe aan de contactinformatie.
3. Nieuwsbrief: Voeg aria-label="Nieuwsbrief inschrijven" toe aan het formulier.

Stap 10: Toegankelijkheid in de Search

1. Zoekveld: Voeg aria-label="Zoekveld" toe aan de <input>.
2. Zoekknop: Voeg aria-label="Zoek" toe aan de <button>.
3. Resultaten: Voeg role="list" toe aan de <ul> voor resultaten.

Toegankelijkheid in Magento 2: Samenvatting

Toegankelijkheid in Magento 2: Tips

1. Test altijd met een screen reader: Tools geven alleen een indicatie, maar niet de volledige gebruikerservaring.
2. Gebruik ARIA-gebruik: Zorg voor een goede semantiek.
3. Volg de WCAG-richtlijnen: Zorg voor volledige toegankelijkheid.
4. Test altijd met echte gebruikers: Gebruikers hebben de beste feedback.

Toegankelijkheid in Magento 2: Conclusie

Toegankelijkheid is cruciaal voor een goede gebruikerservaring. Volg deze stappen om uw Magento 2-website toegankelijk te maken.