SevirantaGör din WooCommerce-butik tillgänglig: en praktisk guide
9 juni 2026
Kort svar. WooCommerce i sig följer WordPress tillgänglighetsriktlinjer hyfsat, men din nätbutik ärver framför allt tillgängligheten från ditt tema, dina plugins och ditt innehåll — och det är där det oftast går fel. Gå igenom de sex punkterna nedan (kontrast, alt-texter, rubriker, plugins & page builders, tangentbord, språk) och var extra uppmärksam på din block-kassa och dina produktfilter; då har du fångat lejonparten.
Varför räcker inte WooCommerce ensamt?
WooCommerce är en plugin ovanpå WordPress. Om din butik uppfyller WCAG beror på hur ditt tema är byggt, vilka färger du valde, vilka plugins och vilken page builder du använder och hur du fyllde i dina produkter. Två butiker på samma WooCommerce-version kan alltså få helt olika resultat. Den goda nyheten: eftersom mycket återkommer via ditt tema och dina mallar täcker en enda fix ofta hundratals sidor.
1. Kontrollera din färgkontrast
Det vanligaste felet. Med ett block-tema (Full Site Editing) går du till Utseende → Redigerare → Stilar → Färger; med ett klassiskt tema till Utseende → Anpassa → Färger. Se till att text och bakgrund har minst 4,5:1 i kontrast (3:1 för stor text). Var särskilt uppmärksam på texten på din Lägg i varukorg-knapp, pris- och kampanjetiketter, och länkar. Ställ in det rätt en gång så gäller det i hela butiken. Se färgkontrast: WCAG-kravet och hur du mäter det.
2. Ge dina produktfoton alt-texter
Öppna en produkt under Produkter, klicka i Produktbild (och
Produktgalleri) på bilden → fyll i fältet Alternativ text i mediebiblioteket.
Beskriv kort och sakligt vad som syns (t.ex. "Svart herrsko i mocka med snörning"),
inget marknadsföringsspråk. Börja med dina bästsäljande produkter och dina
startsidesbanners. Dekorativa bilder får en tom alt (alt=""). Mer om detta i
skriva alt-texter som fungerar.
3. Kontrollera din rubrikstruktur
Använd rubriker i logisk ordning (H1 → H2 → H3) och inte bara för utseendets skull. I blockredigeraren (Gutenberg) ser du nivån per rubrikblock; hoppa inte över några nivåer. Se upp med page builders som Elementor eller Divi: de låter dig göra vilken text som helst stor utan att den blir en riktig rubrik — välj där medvetet rätt rubriknivå.
4. Se upp med dina plugins och din page builder
Det här är ofta den största källan till problem. Plugins för recensioner, chatt, popup-fönster, sliders och filter — och tunga page builders — injicerar sin egen kod i ditt tema, och den innehåller regelbundet knappar utan namn, felaktig ARIA eller element som inte går att styra med tangentbordet. Installera alltså inte varje plugin i blindo, och testa alltid din webbplats med allt aktivt. Visar sig en plugin vara otillgänglig, byt då till ett alternativ som faktiskt respekterar WCAG-normerna. Välj där det går de nya WooCommerce-blocken för varukorg och kassa (se punkt 6).
5. Testa med tangentbordet
Prova att använda din webbplats helt utan mus: bara med Tab-tangenten och Enter. Kommer
du åt allt — meny, produktfilter, variantval, varukorg, kassa — och ser du hela tiden
var fokus ligger? Var i WooCommerce särskilt uppmärksam på variant-dropdowns,
antalsstegraren (+/−) och filterwidgetarna i din sidopanel; det är där tangentbordet
oftast kör fast.
6. Kontrollera din språkinställning och din kassa
Se till att ditt tema sätter rätt språkattribut, så att en skärmläsare väljer rätt
uttal. I ett klassiskt tema finns i header.php raden
<html <?php language_attributes(); ?>> — den ska innehålla språkattributet. Använder
du WPML eller Polylang för flera språk, kontrollera då att varje språkversion får rätt
lang-attribut. Byt helst till WooCommerces blockbaserade Cart- och Checkout-block:
de är mer tillgängliga än den gamla shortcode-kassan och underhålls aktivt med fokus på
tillgänglighet.
Vanliga WooCommerce-fel och deras fix
| WooCommerce-element | Vanligt fel | Fixen |
|---|---|---|
| "Lägg i varukorg"-knapp | för ljust typsnitt / låg kontrast | kontrast i temastilarna till minst 4,5:1 |
| Produktfoton | filnamn som beskrivning (IMG_2043.jpg) | funktionell alt-text i mediebiblioteket |
Antalsstegrare (+/−) | knappar utan etikett, går inte att styra med tangentbordet | lägg till etikett/aria-label eller använd en tillgänglig variant |
| Produktfilter-widget | filter som bara fungerar med mus | tillgänglig filter-plugin eller WooCommerce-filterblocken |
| Tillgänglighets-plugin | att installera en overlay-widget | undvik — reparerar inte din kod och skyddar inte mot krav |
Hjälper en tillgänglighets-plugin från WordPress-katalogen?
Nej. Söker du på "accessibility" hittar du tiotals plugins som lovar att göra din butik compliant med ett klick via en widget. Gå inte på det: de reparerar inte ditt tema och dina mallar, och tillsynsmyndigheter granskar din butiks råa källkod. Att lösa det strukturellt i ditt tema och ditt innehåll är den enda väg som håller — och den ger dig dessutom bättre SEO och snabbare laddtid. Mer om detta i varför en overlay-widget inte skyddar dig.
Uppfyller min WooCommerce-butik därmed lagen?
De här sex punkterna täcker det mesta av vad en automatiserad granskning fastställer, men "uppfylla" går längre: det beror på hela ditt tema, dina plugins och ditt innehåll tillsammans. Om European Accessibility Act gäller dig läser du i vår checklista. Arbetar du också med Shopify? Då hjälper vår Shopify-guide dig vidare.
Hur vet jag var min WooCommerce-butik står i dag?
Snabbaste sättet: skanna en sida gratis. Du får per fynd se vad som är fel och hur du åtgärdar det — och eftersom mycket går via ditt tema och dina mallar löser du det ofta för hela butiken på en gång. På under 60 sekunder, utan konto.