Gjør WooCommerce-butikken din tilgjengelig: en praktisk guide
9. juni 2026
Kort svar: WooCommerce følger i seg selv WordPress' retningslinjer for tilgjengelighet ganske greit, men nettbutikken din arver først og fremst tilgjengeligheten fra temaet ditt, pluginene dine og innholdet ditt, og det er som regel der det går galt. Gå gjennom de seks punktene nedenfor (kontrast, alt-tekster, overskrifter, plugins & page-buildere, tastatur, språk), og vær ekstra oppmerksom på den blokkbaserte checkouten og produktfiltrene dine; da har du tatt hånd om brorparten.
Hvorfor er ikke WooCommerce alene nok?
WooCommerce er en plugin oppå WordPress. Om butikken din oppfyller WCAG, avhenger av hvordan temaet ditt er bygget, hvilke farger du valgte, hvilke plugins og hvilken page-builder du bruker, og hvordan du fylte ut produktene dine. To butikker på samme WooCommerce-versjon kan altså score helt forskjellig. Den gode nyheten: fordi mye går igjen via temaet og malene dine, dekker én fiks ofte hundrevis av sider.
1. Sjekk fargekontrasten din
Den vanligste feilen. Med et blokktema (Full Site Editing) går du til Utseende → Editor → Stiler → Farger; med et klassisk tema til Utseende → Tilpass → Farger. Sørg for at tekst og bakgrunn har minst 4,5:1 i kontrast (3:1 for stor tekst). Vær spesielt oppmerksom på teksten på selve Legg i handlekurv-knappen din, pris- og tilbudsetiketter og lenker. Still det inn riktig én gang, så gjelder det i hele butikken. Se fargekontrast: WCAG-kravet og hvordan du måler det.
2. Gi produktbildene dine alt-tekster
Åpne et produkt under Produkter, klikk på bildet i Produktbilde (og
Produktgalleri) → fyll ut feltet Alternativ tekst i mediebiblioteket. Beskriv
kort og faktisk hva bildet viser (f.eks. "Svart herresko i semsket skinn med
skolisser"), ikke markedsføringsspråk. Begynn med bestselgerne dine og bannerne på
forsiden. Dekorative bilder får en tom alt (alt=""). Mer om dette i skriv
alt-tekster som virker.
3. Sjekk overskriftsstrukturen din
Bruk overskrifter i logisk rekkefølge (H1 → H2 → H3), og ikke bare for utseendet. I blokkeditoren (Gutenberg) ser du nivået for hver overskriftsblokk; ikke hopp over nivåer. Vær obs på page-buildere som Elementor eller Divi: de lar deg gjøre hvilken som helst tekst stor uten at den blir en ekte overskrift, velg bevisst riktig overskriftsnivå der.
4. Hold øye med pluginene og page-builderen din
Dette er ofte den største kilden til problemer. Plugins for anmeldelser, chat, popups, slidere og filtre, og tunge page-buildere, injiserer sin egen kode i temaet ditt, og den inneholder regelmessig knapper uten navn, feil ARIA eller elementer som ikke kan betjenes med tastaturet. Ikke installer enhver plugin i blinde, og test alltid nettstedet ditt med alt aktivt. Viser en plugin seg å være utilgjengelig, bytt til et alternativ som faktisk respekterer WCAG-standardene. Velg der det er mulig de nye WooCommerce-blokkene for handlekurv og checkout (se punkt 6).
5. Test med tastaturet
Prøv nettstedet ditt helt uten mus: bare med Tab-tasten og Enter. Når du fram til alt,
meny, produktfiltre, variantvalg, handlekurv, kasse, og ser du hele tiden hvor fokuset
er? Vær i WooCommerce spesielt oppmerksom på nedtrekksmenyene for varianter,
antall-stepperen (+/−) og filter-widgetene i sidestolpen din; det er der tastaturet
oftest kjører seg fast.
6. Sjekk språkinnstillingen og checkouten din
Sørg for at temaet ditt setter riktig språkattributt, slik at en skjermleser velger
riktig uttale. I et klassisk tema står linjen
<html <?php language_attributes(); ?>> i header.php, den skal inneholde
språkattributtet. Bruker du WPML eller Polylang for flere språk, sjekk at hver
språkversjon får riktig lang-attributt. Bytt helst til de blokkbaserte Cart- og
Checkout-blokkene i WooCommerce: de er mer tilgjengelige enn den gamle
shortcode-checkouten og vedlikeholdes aktivt med tanke på tilgjengelighet.
Vanlige WooCommerce-feil og hvordan du fikser dem
| WooCommerce-element | Vanlig feil | Fiksen |
|---|---|---|
| "Legg i handlekurv"-knappen | for lys skrift / lav kontrast | kontrast i temastilene opp til minst 4,5:1 |
| Produktbilder | filnavn som beskrivelse (IMG_2043.jpg) | funksjonell alt-tekst i mediebiblioteket |
Antall-stepperen (+/−) | knapper uten label, kan ikke betjenes med tastaturet | legg til label/aria-label, eller bruk en tilgjengelig variant |
| Produktfilter-widgeten | filtre som bare kan brukes med musa | tilgjengelig filter-plugin eller WooCommerce-filterblokkene |
| Tilgjengelighets-plugin | å installere en overlay-widget | unngå den, den reparerer ikke koden din og beskytter ikke mot krav |
Hjelper en tilgjengelighets-plugin fra WordPress-pluginkatalogen?
Nei. Søker du på "accessibility", finner du dusinvis av plugins som lover å få butikken din til å oppfylle kravene med ett klikk via en widget. Ikke gå på det: de reparerer ikke temaet og malene dine, og tilsynsmyndighetene kontrollerer den rå kildekoden til butikken din. Å løse det strukturelt i temaet og innholdet ditt er den eneste veien som holder, og det gir deg attpåtil bedre SEO og raskere lastetid. Les mer i hvorfor en overlay-widget ikke beskytter deg.
Oppfyller WooCommerce-butikken min dermed loven?
Disse seks punktene dekker størstedelen av det en automatisert test kan fastslå, men "å oppfylle kravene" går lenger: det avhenger av hele temaet ditt, pluginene dine og innholdet ditt samlet. Om European Accessibility Act gjelder for deg, finner du ut i sjekklisten vår. Jobber du også med Shopify? Da hjelper Shopify-guiden vår deg videre.
Kjører du en chat-plugin, for eksempel Tidio eller LiveChat? Da treffer EU AI Act fra 2. august 2026 også butikken din: kunden din må ved første kontakt vite at det er en AI de chatter med. Hvilken merking du slår på hos hvilken leverandør, står i chatbotens AI-merking per leverandør.
Hvordan vet jeg hvor WooCommerce-butikken min står nå?
Den raskeste måten: skann én side gratis. Du får se per funn hva som er feil og hvordan du fikser det, og fordi mye går via temaet og malene dine, løser du det ofte for hele butikken på én gang. På under 60 sekunder, uten konto. Skann siden din gratis.