Shopify
Toegankelijkheid in Shopify: wat standaard misgaat en hoe je het oplost
Shopify is een goed platform, en toch voldoet vrijwel geen enkele Shopify-winkel. Dat is geen tegenspraak: het deel dat Shopify beheert — de gehoste checkout, de infrastructuur — is redelijk verzorgd, maar het deel dat bepaalt of een klant kan kopen zit in jouw thema, en het thema is van jou. Deze pagina gaat onderdeel voor onderdeel: wat misgaat, welk criterium het schendt en wat er precies verandert.
Shopify maakt je niet conform en houdt je er ook niet van af. De gehoste checkout helpt; het thema (Dawn inbegrepen) komt met bekende drempels in het menu, de productgalerij, de variantkiezer, de winkelwagenlade en de zoekfunctie. Ze worden allemaal opgelost in de .liquid-bestanden, de JavaScript en de CSS van het thema — geen enkele vanuit het beheerpaneel.
Wat Shopify levert en wat jij levert
Dat is de moeite waard om goed te scheiden, want de meeste marketing gooit het door elkaar.
Wat Shopify levert: de gehoste checkout, die het platform onderhoudt en verbetert zonder dat jij iets doet, en de basisonderdelen van de officiële thema’s, die per versie beter zijn geworden.
Wat jij levert: het thema en de aanpassingen daarop, de apps die je installeert (pop-ups en zoekbalken van derden zijn de ergste), je afbeeldingen en hun alternatieve tekst, en de teksten op je productpagina’s. Daar zit 90 % van wat een audit vindt.
Eén nuance die telt als je in Europa verkoopt: een goed verzorgde checkout ontslaat je niet, want de verplichting kijkt naar de hele dienst, niet naar één stuk ervan.
De zeven drempels die er bijna altijd zijn
| Onderdeel | Wat misgaat | WCAG | De oplossing |
|---|---|---|---|
Menu en uitklapmenu’sheader.liquid | De menuknop werkt aria-expanded nooit bij, en megamenu’s houden de toetsenbordfocus vast. | 4.1.2 · 2.1.1 | aria-expanded bijwerken bij openen en sluiten, en het submenu koppelen met aria-controls. |
Productgalerijproduct-media-gallery.liquid | De miniaturen zijn knoppen zonder toegankelijke naam en de pijlen hebben alleen een icoon. | 1.1.1 · 2.4.4 | Geef een aria-label zoals “Afbeelding 2 van 7 bekijken” en markeer de actieve met aria-current. |
Variantkiezerproduct-variant-picker.liquid | De gekozen kleur is alleen aan de kleur te zien, en uitverkochte varianten worden niet aangekondigd. | 1.4.1 · 1.3.1 | Groepeer in een fieldset met legend, gebruik echte radio’s en voeg “Uitverkocht” toe als verborgen tekst. |
Winkelwagenladecart-drawer (JS) | Bij openen blijft de focus erachter, Escape sluit niet, en bij sluiten komt de focus niet terug. | 2.4.3 · 2.1.2 | Focus verplaatsen bij openen, erbinnen houden, sluiten met Escape en teruggeven aan de knop. |
Voorspellend zoekenpredictive-search.liquid | Resultaten verschijnen zonder aankondiging: wie het scherm niet ziet, weet niet dat ze er zijn. | 4.1.3 · 1.3.1 | Kondig het aantal resultaten aan met role="status" en aria-live="polite". |
Voettekstfooter.liquid | Het nieuwsbriefveld gebruikt de grijze tijdelijke tekst als label en sociale iconen hebben geen naam. | 3.3.2 · 1.1.1 | Een echt verborgen label gekoppeld met for, en een aria-label op elk icoon. |
Contrast en focusbase.css | De actiebadge en uitgeschakelde knoppen blijven onder 4,5:1; de focusring is nauwelijks zichtbaar. | 1.4.3 · 2.4.7 | Maak die kleuren donkerder en geef focus een rand van 3 px met wat afstand. |
De bestandsnamen horen bij Dawn en de officiële thema’s die daarvan afgeleid zijn. In een betaald thema verandert het pad, het probleem niet.
Waarom de widget uit de app store dit niet oplost
In de Shopify App Store staan tientallen toegankelijkheidswidgets voor € 20–50 per maand. Geen enkele lost iets uit de tabel hierboven op, want geen enkele herschrijft je thema: ze leggen er een laag overheen met knoppen voor contrast en lettergrootte. De focus die verdwijnt als de winkelwagenlade opengaat verdwijnt nog steeds, en de maatkiezer zegt nog steeds niet welke maat gekozen is.
Erger nog: sommige injecteren onjuiste ARIA op elementen die al in orde waren en maken de ervaring met een schermlezer slechter. Heb je er al een, gooi hem er vandaag niet uit — maar reken hem niet als conformiteit.
Test je winkel in tien minuten, zonder gereedschap
- Leg de muis weg. Ga vanaf de homepage naar een product, kies een variant, leg het in de winkelwagen en kom in de checkout met alleen Tab, Shift+Tab, Enter en de pijltjes.
- Let bij elke stap op waar de focus staat. Zodra je niet ziet welk element geselecteerd is, is dat een fout op 2.4.7.
- Open de winkelwagenlade en druk op Escape. Hij moet sluiten en de focus teruggeven aan de knop die hem opende.
- Zoom de pagina naar 200 %. Niets mag overlappen of horizontaal scrollen afdwingen.
- Zet afbeeldingen uit in de browser. Als je productpagina’s stil vallen, ontbreekt alternatieve tekst.
Gaat hier iets mis, dan heb je al de lijst van wat er moet gebeuren vóór je aan verklaringen of certificaten denkt.
Wil je de volledige lijst voor jouw winkel?
De gratis scan geeft je in enkele minuten een eerste kaart van de drempels op je site: geen account, geen kaart, geen verplichting.