WooCommerce
Toegankelijkheid in WooCommerce: waar het probleem echt zit
WooCommerce heeft iets zeldzaams in deze sector: het project publiceert zijn eigen standpunt over toegankelijkheid en stelt dat de voorkant van de kernplugin “substantieel conform” is met WCAG 2.2 AA. Dat zegt vrijwel niemand. Het addertje: een WooCommerce-winkel is niet alleen de plugin, maar een thema, tien tot dertig plugins en een betaalprovider. Daar gaat het stuk.
De kern van WooCommerce is zelden het probleem. Wel: meldingen die niet worden aangekondigd, variatiekiezers zonder label, facetfilters van plugins die het toetsenbord niet bereikt, en checkoutvelden die een fout alleen met een rode rand aangeven. Bijna alles is op te lossen met hooks en overschreven templates, zonder de kern aan te raken.
Wat WooCommerce levert en wat jij levert
Wat WooCommerce levert: het project stelt dat de voorkant van de kernplugin substantieel conform is met WCAG 2.2 niveau AA en erkent openlijk hiaten in het beheer. Een eerlijke en ongebruikelijke uitspraak.
Wat jij levert: het thema — en het verschil tussen een “accessibility-ready” thema en een van een templatemarkt is enorm. De plugins voor filters, pop-ups en reviews. De betaalprovider, vaak een iframe van derden waarvan je de toegankelijkheid niet bepaalt. En de inhoud: duidelijke producttitels, alternatieve teksten, foutmeldingen die zeggen wat er moet worden gecorrigeerd.
Praktisch gevolg: voldoet je winkel niet, dan zit het werk vrijwel nooit in de kern maar in vier of vijf concrete punten van jouw installatie.
De zeven drempels die er bijna altijd zijn
| Onderdeel | Wat misgaat | WCAG | De oplossing |
|---|---|---|---|
Meldingen en foutenwoocommerce-message / error | “Toegevoegd aan winkelwagen” en foutmeldingen worden nooit aangekondigd aan schermlezergebruikers. | 4.1.3 | Verpak ze via een filter in een gebied met role="alert" of aria-live. |
Variatiekiezervariable.php (variaciones) | De keuzelijsten voor maat en kleur komen zonder gekoppeld label. | 1.3.1 · 3.3.2 | Koppel elke select aan zijn label for in het overschreven template. |
Toevoegen aan winkelwagen via AJAXadd-to-cart AJAX | De winkelwagen werkt stil bij: visueel verandert hij, voor een schermlezer gebeurt er niets. | 4.1.3 | Markeer de container die bijwerkt met aria-live="polite". |
Facetfiltersfiltros por facetas (plugin) | Filterplugins bouwen vaak nepselectievakjes die het toetsenbord niet bereikt. | 2.1.1 · 2.4.7 | Gebruik native besturingselementen, of geef de eigen exemplaren een rol, status en zichtbare focus. |
Checkoutveldenform-checkout.php | Fouten alleen met kleur aangegeven, en velden zonder gekoppelde beschrijving. | 3.3.1 · 3.3.2 | Expliciete fouttekst en aria-describedby op velden met hulptekst. |
Betaalproviderpasarela de pago externa | Het iframe van de provider kan ontoegankelijk zijn en dat repareer je niet vanaf je site. | 4.1.2 | Test een echte betaling met het toetsenbord en wissel bij problemen van provider of spreek hem erop aan. |
Het thematema (Storefront u otro) | Laag contrast en onzichtbare focus: het meest voorkomende gebrek in marktplaatsthema’s. | 1.4.3 · 2.4.7 | Kies een “accessibility-ready” thema of corrigeer contrast en focus in het childthema. |
De oplossingen gaan als hooks in de functions.php van je childthema of als overschreven templates onder woocommerce/. Nooit door de kern te bewerken: de volgende update wist dat.
Waarom de toegankelijkheidsplugin dit niet oplost
De WordPress-repository staat vol plugins die conformiteit beloven achter een vinkje. Ze voegen een balk toe met hoog contrast en lettergrootte. Ze lossen geen melding op die niet wordt aangekondigd, geen filter dat het toetsenbord niet kan bedienen, en geen checkoutveld zonder label.
Daar komt een WordPress-eigen probleem bij: elke plugin voegt eigen HTML toe aan de voorkant, dus een plugin die “toegankelijkheid repareert” botst vaak met wat een andere net heeft gegenereerd. De weg die werkt is de saaie: kies het thema zorgvuldig, loop de plugins na die HTML produceren en corrigeer met hooks.
Test je winkel in tien minuten, zonder gereedschap
- Leg de muis weg. Ga vanaf de homepage naar een variabel product, kies maat en kleur, leg het in de winkelwagen en ga naar de checkout met Tab, Shift+Tab, Enter en de pijltjes.
- Leg in de winkelwagen en luister. Gebruik je AJAX, controleer dan of de melding “toegevoegd aan winkelwagen” in een
aria-live-gebied staat. - Verstuur de checkout met een veld bewust leeg. De fout moet zeggen welk veld en wat er ontbreekt, niet alleen de rand rood kleuren.
- Bedien de filters met het toetsenbord. Daar gaan de meeste plugins mis.
- Zoom naar 200 % en controleer of de winkelwagentabel bruikbaar blijft.
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.