Tillgänglighet för e-handel — Komplett guide till EAA-kraven

EU:s tillgänglighetsdirektiv (2019/882) blev tillämpligt den 28 juni 2025. E-handel är en av de tjänster som direktivet uttryckligen nämner. Om du säljer produkter eller tjänster online till konsumenter inom EU gäller kraven för dig.

I praktiken innebär det att din webbutik måste uppfylla WCAG 2.1 nivå AA. Inte för att det är "bra att ha" — utan för att lagen kräver det.

Den här guiden går igenom vad kraven innebär i praktiken, vilka de vanligaste problemen är i varje del av en webbutik, varför tillgänglighet även är en affärsfråga och hur du kommer igång.

Vem berörs?

Tillgänglighetsdirektivet gäller alla webbutiker och marknadsplatser som erbjuder produkter eller tjänster till konsumenter inom EU. Enda undantaget: mikroföretag som tillhandahåller tjänster (färre än 10 anställda och omsättning under 2 miljoner euro).

Om din omsättning överstiger 2 miljoner euro eller om du har fler än 10 anställda gäller kraven för dig. I praktiken hamnar de flesta seriösa webbutiker inom direktivets tillämpningsområde.

Viktigt att notera: kraven gäller även företag utanför EU som säljer till EU-konsumenter. Om du säljer till EU-kunder gäller direktivet oavsett var ditt företag finns.

Varför tillgänglighet också är en affärsfråga

Köpkraften hos personer med funktionsnedsättning

Enligt WHO lever cirka 1,3 miljarder människor — 16 % av världens befolkning — med en betydande funktionsnedsättning. I Europa är siffran runt 87 miljoner (Eurostat). Den sammanlagda köpkraften hos dessa personer och deras familjer och vänner uppskattas till över en biljon dollar globalt.

Om din webbutik inte är tillgänglig kan den här kundgruppen inte handla hos dig. De går till en konkurrent vars kassa fungerar med skärmläsare.

Tillgänglighetsproblem driver bort alla kunder

Tillgänglighetsproblem påverkar inte bara personer med funktionsnedsättning. Dålig kontrast drabbar alla som använder telefonen i starkt solljus. Saknade formuläretiketter förvirrar vem som helst. En kassa som inte fungerar med tangentbord blockerar surfplattanvändare.

Microsoft kallar den här ansatsen inkluderande design: en funktionsnedsättning kan vara permanent (blindhet), tillfällig (återhämtning efter ögonoperation) eller situationsbetingad (körning, starkt solljus, bullrig miljö). En tillgänglig webbutik fungerar i alla dessa situationer.

Hur påverkas försäljningen?

Tillgänglighetsproblem påverkar varje steg i köpresan:

Steg	Typiskt problem	Konsekvens
Bläddra bland produkter	Saknade alt-texter, filter som inte fungerar	Användaren hittar inte produkter → lämnar sajten
Visa produktdetaljer	Priser kan inte läsas med skärmläsare, färgvarianter utan namn	Användaren får inte tillräcklig information för köpbeslut
Lägga till i varukorg	Knappen fungerar inte med tangentbord, ingen bekräftelse	Användaren vet inte om åtgärden lyckades
Kassa	Saknade formuläretiketter, otydliga felmeddelanden	Beställningen avbryts → förlorad försäljning
Betalning	Val av betalmetod fungerar inte med tangentbord	Kunden kan inte betala → varukorgen överges

Vart och ett av dessa steg är en punkt där du förlorar kunder — och intäkter. Askems webbanalys hjälper dig att identifiera var användare faller bort, och feedbackverktyget berättar varför.

Vad tillgänglig e-handel innebär i praktiken

WCAG 2.1 AA är ingen abstrakt standard — den översätts till konkreta krav för varje del av en webbutik.

Produktsidor

• Produktbilder behöver alt-texter (WCAG 1.1.1). Ett filnamn räcker inte. Alt-texten ska beskriva vad som finns i bilden: "Blå t-shirt i bomull, rund halsringning, framifrån." 75 % av alla onlineköpare baserar sina köpbeslut på produktfoton — om en skärmläsaranvändare inte får den informationen köper användaren inte.
• Färgvarianter får inte bara vara färgade prickar. Namnge färgerna i text också — en synnedsatt användare kan inte skilja rött från blått.
• Priser måste vara läsbara med skärmläsare. Om ett pris är en bild eller CSS-formaterad text hittar skärmläsaren det inte. Samma gäller realisationspriser — "var 499 kr, nu 299 kr" måste vara läsbart, inte bara överstruken styling.
• Storleks- och lagerinformation behöver tydliga etiketter. Rullgardinsmenyn "Välj storlek" måste fungera med tangentbord och berätta för skärmläsaren vad som är valt och vilka storlekar som är slut.

Sök och filter

• Sökfältet behöver en tydlig etikett, inte bara en förstoringsglasikon (WCAG 1.3.1).
• Filter måste kunna användas med tangentbord (WCAG 2.1.1). Många anpassade reglage och flervalskontroller fungerar inte utan mus. Detta är ett av de vanligaste problemen i webbutiker.
• Uppdateringar av sökresultat måste meddelas till skärmläsare (WCAG 4.1.3). När ett filter ändrar resultaten behöver användaren veta det. Annars märker användaren ingenting och tror att sajten är trasig.
• Sidnumrering måste vara tillgänglig. "Nästa sida"-länkar behöver tydliga etiketter, och aktuell sida måste vara markerad.

Varukorg och kassa

Detta är den mest kritiska delen av en webbutik ur tillgänglighetssynpunkt. Om kassan inte fungerar är det meningslöst att bläddra bland produkter.

• Varje formulärfält behöver en etikett (WCAG 1.3.1). "Förnamn", "Efternamn", "E-post" — inte platshållartext som försvinner när användaren börjar skriva.
• Felmeddelanden måste berätta vad som är fel och var (WCAG 3.3.1, 3.3.3). "Kontrollera dina uppgifter" räcker inte. "E-postadressen saknar @-tecken" hjälper.
• Val av betalmetod måste fungera med tangentbord. Radioknappar, flikar eller anpassade knappar — alla måste vara hanterbara utan mus.
• Orderbekräftelsen måste vara tydlig. Skärmläsaren måste kunna berätta för användaren att beställningen lyckades. En visuell "grön bock" ensam räcker inte.
• Tidsbegränsningar måste kommuniceras. Om kassan har en tidsgräns (t.ex. reserverade varor frigörs efter 15 minuter) måste användaren informeras och ges möjlighet att förlänga (WCAG 2.2.1).

Färger och kontrast

Det vanligaste tillgänglighetsproblemet i webbutiker är otillräcklig färgkontrast. Enligt WebAIM Million 2024-studien uppfyller 81 % av webbplatser inte WCAG:s kontrastkrav (WCAG 1.4.3). I e-handeln är kontrastproblem särskilt vanliga i priser, knappar och "Lägg i varukorg"-element.

Kravet är tydligt: normal text måste ha ett kontrastförhållande på minst 4,5:1 mot bakgrunden. Stor text (18pt eller större) kräver minst 3:1. Kontrollera dina färger med vårt kontrastkontrollverktyg.

Popup-fönster, modaler och chattfönster

Webbutiker är fulla av popup-fönster: nyhetsbrev, rabattkoder, chattverktyg, cookiemeddelanden. Var och en måste följa samma regler:

• Fokus måste flyttas till modalen när den öppnas — annars vet skärmläsaren inte att den finns.
• Escape-tangenten måste stänga den.
• Fokus måste återgå till den ursprungliga positionen när modalen stängs.
• Chattfönster måste vara tillgängliga via tangentbord. Många chattverktyg från tredje part är inte tillgängliga — kontrollera detta separat.

Vanligaste tillgänglighetsproblemen i webbutiker

Problem	Var det uppstår	WCAG-kriterium	Åtgärd
Produktbilder saknar alt-text	Produktsidor, listningar	1.1.1	Lägg till beskrivande alt-attribut på varje produktbild
Filter fungerar inte med tangentbord	Kategorisidor	2.1.1	Använd inbyggda HTML-element eller lägg till ARIA-roller och tangentbordsstöd
Formuläretiketter saknas	Kassa, registrering	1.3.1	Lägg till label-element till varje fält
Otillräcklig färgkontrast	Priser, knappar, länkar	1.4.3	Kontrollera och korrigera kontrastförhållandet till minst 4,5:1
Felmeddelanden identifierar inte problemet	Kassa, kontaktformulär	3.3.1, 3.3.3	Namnge fältet med fel och beskriv vad som krävs
Popup-fönster inte tillgängliga	Nyhetsbrev, erbjudanden, chatt	2.1.1, 4.1.2	Lägg till fokushantering, Escape-stöd och ARIA-roller
Sökresultatuppdatering meddelas inte	Sök, filter	4.1.3	Använd ARIA live region för att meddela antal resultat
Sidnumrering saknar markering av aktuell sida	Produktlistningar	1.3.1	Markera aktuell sida med aria-current="page"

Askems kvalitetssäkring upptäcker automatiskt saknade alt-texter, kontrastfel, saknade formuläretiketter och tomma länkar — det vill säga majoriteten av de vanligaste problemen.

Påföljder och risker

Om din webbutik inte uppfyller kraven kan konsekvenserna bli konkreta.

Myndighetstillsyn

Artikel 30 i tillgänglighetsdirektivet kräver att påföljderna ska vara "effektiva, proportionerliga och avskräckande". Varje EU-medlemsstat fastställer sina egna åtgärder, som kan innefatta förelägganden, böter och avlägsnande av tjänster från marknaden.

Juridiska risker

Tillsyn kommer inte bara från myndigheter. Tillgänglighetsbrister kan leda till diskrimineringsklagomål och skadeståndsanspråk. Internationellt har webbutiker varit bland de vanligaste målen för tillgänglighetsstämningar — det mest kända fallet är Domino's Pizza-stämningen i USA, där en blind kund inte kunde beställa från företagets webbplats.

Förlorade intäkter

Och rent praktiskt: en otillgänglig kassa förlorar kunder varje dag — oavsett lagen. Varje gång en användare inte kan slutföra en beställning är det en förlorad försäljning. Till skillnad från myndighetssanktioner är denna förlust daglig och växande.

Hur Askem hjälper webbutiker

Automatisk tillgänglighetsövervakning

Askems kvalitetssäkring skannar din webbutik regelbundet och rapporterar WCAG-problem automatiskt. Du meddelas när nya problem uppstår — till exempel när någon publicerar en produktsida utan alt-texter eller en kampanjsida inte uppfyller kontrastkravet.

Användarfeedback direkt från sidorna

Automatiska verktyg hittar cirka 30–40 % av WCAG-bristerna. Resten — som förvirrande navigering, otydliga produktbeskrivningar eller en trasig kassaprocess — uppdagas först när en riktig användare stöter på dem. Askems feedbackverktyg samlar in feedback direkt från användarna på dina sidor.

Analys utan kakor

Askems webbanalys visar vilka sidor som används mest — utan kakor och GDPR-komplikationer. Se var i köpresan användare faller bort och prioritera tillgänglighetsåtgärder därefter.

Så kommer du igång

1. Beställ en gratis tillgänglighetsrapport

Beställ en gratis rapport från Askem — ange din webbutiks adress och e-post, så skickar vi en WCAG-analys inom 24 timmar. Rapporten visar de viktigaste bristerna och hjälper dig förstå arbetets omfattning.

2. Testa kassan med enbart tangentbord

Det här är det bästa enskilda testet för en webbutik. Lägg undan musen och försök slutföra en beställning med enbart tangentbordet. Tab för att navigera, Enter för att aktivera, Escape för att stänga. Om du inte kommer till slutet av kassan kan inte dina kunder heller — åtminstone inte alla.

3. Prioritera åtgärder

Börja med kassaprocessen och sidmallar. En enda fix i sidhuvudet eller produktkortsmallen kan lösa hundratals enskilda brister på en gång. Använd vår WCAG-checklista för tekniska kriterier, EAA-checklistan för organisatoriska krav och kontrastkontrollen för att verifiera färger.

4. Sätt upp kontinuerlig övervakning

En engångskontroll räcker inte. Webbutiker förändras ständigt, och varje ändring kan introducera nya problem. Askems kontinuerliga tillgänglighetsövervakning upptäcker regressioner automatiskt — så du inte behöver vänta till nästa manuella granskning.

Sammanfattning

Tillgänglighet för e-handel är ett lagkrav som gäller i praktiken alla betydande webbutiker inom EU. Kraven gäller nu. Men det handlar inte bara om lagstiftningen — en otillgänglig webbutik förlorar kunder och intäkter varje dag.

De goda nyheterna: de största problemen är ofta enkla att åtgärda. Beställ en gratis tillgänglighetsrapport från Askem — ange din webbutiks adress och e-post, så får du en WCAG-analys inom 24 timmar. Gratis, inga förpliktelser.