Gör din Shopify-butik tillgänglig: en praktisk guide

5 juni 2026

Kort svar. Shopify lägger en bra grund men levererar ingen tillgänglig nätbutik "ur lådan". De flesta felen sitter i ditt tema, ditt innehåll och dina appar — och just dem kan du ofta åtgärda i hela temat på en gång. Gå igenom de sex punkterna nedan (kontrast, alt-texter, rubriker, appar, tangentbord, språk) så har du fångat lejonparten.

Varför räcker inte Shopify ensamt?

Ett Shopify-tema är en mall. Om din webbplats uppfyller WCAG beror på hur temat är byggt, vilka färger du valde, vilka appar du installerade och hur du fyllde i dina produkter. Två butiker på samma tema kan alltså få helt olika resultat. Den goda nyheten: eftersom mycket återkommer via temat täcker en enda fix ofta hundratals sidor.

1. Kontrollera din färgkontrast

Det vanligaste felet. Gå i din panel till Online Store → Themes → Customize → Theme settings (kugghjulet) → Colors och 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å knapptexter, prisetiketter, länkar — och på texten på din Add to cart-knapp. 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

Gå till Products, klicka på en produkt och skrolla till Media → klicka på bilden → Add alt text. 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="").

3. Kontrollera din rubrikstruktur

Använd rubriker i logisk ordning (H1 → H2 → H3) och inte bara för utseendets skull. I Shopify-redigeraren ser du rubrikerna i dina sektioner och rich text-block; hoppa inte över några nivåer.

4. Se upp med dina appar

Det här är ofta den största källan till problem. Appar för recensioner, chatt, popup-fönster och filter injicerar sin egen kod — ofta via iFrames eller Shadow DOM — 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 app i blindo, och testa alltid din webbplats med apparna aktiva. Visar sig en app vara otillgänglig, byt då till ett alternativ som faktiskt respekterar WCAG-normerna.

5. Testa med tangentbordet

Prova att använda din webbplats helt utan mus: bara med Tab-tangenten och Enter. Kommer du åt allt — meny, filter, varukorg, kassa — och ser du hela tiden var fokus ligger? Många människor navigerar så, och det avslöjar hinder snabbt.

6. Kontrollera din språkinställning

Se till att ditt tema sätter rätt språkattribut, så att en skärmläsare väljer rätt uttal. Gå till Themes → Actions (⋯) → Edit code, öppna layout/theme.liquid och kontrollera att <html>-taggen innehåller språkvariabeln: <html lang="{{ request.locale.iso_code }}">. Shopify sköter detta oftast bra, men dubbelkolla efter användning av översättningsappar.

Vanliga Shopify-fel och deras fix

Shopify-element	Vanligt fel	Fixen
Knappar	för ljust typsnitt på kassaknappen	kontrast i temainställningarna till minst 4,5:1
Produktfoton	filnamn som beskrivning (`product_v2.png`)	funktionell alt-text via Media
Varukorgs-popup	stängningskryss (`X`) utan etikett	`aria-label="Stäng varukorgen"` i mallen
Tillgänglighetsapp	att installera en overlay-widget	undvik — reparerar inte din kod och skyddar inte mot krav

Hjälper en tillgänglighetsapp från Shopify App Store?

Nej. Söker du i App Store på "accessibility" hittar du tiotals appar som lovar att göra din butik compliant med ett klick via en widget. Gå inte på det: de reparerar inte ditt grundtema, 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 Shopify-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 appar och ditt innehåll tillsammans. Om European Accessibility Act gäller dig läser du i vår checklista. Och observera: en overlay-app löser inte detta — den reparerar inte din temakod.

Hur vet jag var min Shopify-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 löser du det ofta för hela butiken på en gång. På under 60 sekunder, utan konto.