Shopify · EAA

Shopify en de European Accessibility Act: veelvoorkomende problemen oplossen

Veel Shopify-thema's zijn goed gebouwd, maar de typische gaten ontstaan bij het inrichten: afbeeldingen zonder alt-tekst, icoonknoppen zonder naam en geen toegankelijkheidsverklaring.

1. Alt-tekst voor productfoto's

Producten → product → Media → afbeelding → alt-tekst. Beschrijf wat voor de aankoop telt: „Merinosok in marineblauw, maat 39–42”, niet „IMG_2231”.

2. Icoonknoppen een naam geven

<button class="header__icon--cart" aria-label="Winkelwagen, {{ cart.item_count }} artikelen">
  {% render 'icon-cart' %}   <!-- in het icoon-snippet: aria-hidden="true" -->
</button>

3. Zoekveld een label geven

<label for="Search-In-Modal" class="visually-hidden">Zoeken in de winkel</label>
<input id="Search-In-Modal" type="search" placeholder="Zoeken">

4. Toegankelijkheidsverklaring toevoegen

Online winkel → Pagina's → nieuwe pagina „Toegankelijkheid”, gegenereerde tekst plakken, daarna onder Navigatie aan het footermenu toevoegen.

5. Apps controleren

Reviewwidgets, chatvensters en cookiebanners van derden brengen vaak eigen drempels mee. Test ze met het toetsenbord.

Veelgestelde vragen

Is Shopify automatisch EAA-proof?

Nee. Shopify en veel thema's bieden een goede basis, maar inhoud (alt-teksten, linkteksten), aanpassingen aan het thema, apps en de toegankelijkheidsverklaring zijn de verantwoordelijkheid van de verkoper.

Waar voeg ik alt-tekst toe in Shopify?

In het product onder Media: klik op de afbeelding en kies de optie om alt-tekst toe te voegen. Voor andere bestanden onder Content → Bestanden.