Varje gång en kund med funktionsnedsättning inte kan ta sig igenom din kassa, använda ett produktfilter eller läsa dina produktbeskrivningar har du tappat en försäljning. Mer än 1 av 4 vuxna i USA har någon form av funktionsnedsättning. Det är inget litet marknadssegment. Det är din marknad.
Webbtillgänglighet är inte bara en etisk fråga. Det är ett juridiskt krav. Americans with Disabilities Act (ADA) kräver att företag gör sina tjänster tillgängliga för personer med funktionsnedsättning. Det gäller även webbutiker. Tusentals webbplatser får juridiska krav varje år för brister i tillgänglighet, och e-handelssajter är de som oftast drabbas. Den här artikeln går igenom vad tillgänglighet innebär, varför det spelar roll för din butik, vad lagen kräver och hur du genomför det utan dyra specialverktyg.
Vad är webbtillgänglighet?
Webbtillgänglighet betyder att din webbplats går att använda för alla, även personer med funktionsnedsättning. Det inkluderar personer som är blinda eller har nedsatt syn, döva eller hörselskadade, har motoriska funktionsnedsättningar som gör det svårt att använda mus, har kognitiva funktionsnedsättningar eller inlärningssvårigheter, eller har andra tillstånd som påverkar hur de använder webben.
Tillgängliga webbplatser fungerar med hjälpmedel som skärmläsare (program som läser text högt), navigering enbart med tangentbord (för personer som inte kan använda mus) och förstoringsverktyg. En tillgänglig webbplats använder också tydligt språk, tillräcklig färgkontrast, rätt rubrikstruktur och formuläretiketter som skärmläsare kan förstå.
Huvudprincipen: dina kunder ska kunna göra det de kom för att göra. De ska kunna bläddra, filtrera, läsa beskrivningar, lägga i varukorgen och slutföra köpet, oavsett vilket hjälpmedel eller vilka anpassningar de använder.
Vad är ADA och varför gäller den din butik?
Americans with Disabilities Act (ADA), som antogs 1990, är en amerikansk federal lag som förbjuder diskriminering av personer med funktionsnedsättning. Avsnitt III i ADA kräver att alla företag som är öppna för allmänheten ger personer med funktionsnedsättning lika tillgång. Det inkluderar webbplatser och onlinetjänster. Lagen har inga undantag för småföretag eller återförsäljare online.
Din webbutik räknas som en allmänt tillgänglig verksamhet enligt ADA. Det betyder att din webbplats måste vara tillgänglig. Du kan inte hävda att din butik är för liten, för ny eller att tillgänglighet är för dyrt. Lagen gäller. Domstolar har genomgående slagit fast att ADA gäller webbplatser, och USA:s justitiedepartement har uttalat att webbtillgänglighet är en medborgarrättslig fråga, inte något valfritt.
WCAG 2.1 nivå AA: tillgänglighetsstandarden
Webbstandarden som används i rättsfall och efterlevnadskrav heter WCAG (Web Content Accessibility Guidelines) 2.1 nivå AA. WCAG förvaltas av World Wide Web Consortium (W3C), en ideell organisation som sätter standarder för webben.
WCAG 2.1 nivå AA har riktlinjer inom fyra huvudområden:
Uppfattbart: användare kan se eller höra ditt innehåll
Ditt innehåll måste presenteras på sätt som kunder kan uppfatta. Det betyder att du ger textbeskrivningar (alt-text) för alla produktbilder, lägger till undertexter i videor, ser till att text och knappar har tillräcklig färgkontrast (minst 4,5:1 för vanlig text) och undviker innehåll som blinkar mer än 3 gånger per sekund, vilket kan orsaka anfall.
Hanterbart: användare kan navigera och interagera med din butik
Användare måste kunna navigera i din butik med enbart tangentbord (ingen mus ska krävas). Länkar och knappar måste gå att nå med tangentbord. Formulär måste ha tydliga etiketter som skärmläsare kan förstå. Din butik ska inte fånga tangentbordsanvändare i oändliga loopar eller kräva tidsbegränsade moment som användare inte kan justera. Menyval och formulärfält måste vara lätta att hitta och använda.
Begripligt: användare kan förstå vad din butik säger och gör
Din butik måste vara lätt att förstå. Använd tydligt språk och korta meningar. Förklara facktermer första gången de används. Organisera sidorna logiskt med rätt rubrikstruktur (en H1 per sida, följd av H2 och H3 i ordning). Förklara felmeddelanden i formulär tydligt. Gör webbplatsen konsekvent så att användare kan förutse hur navigering och interaktion fungerar.
Robust: din butik fungerar med hjälpmedel
Din kod måste vara skriven rätt så att skärmläsare och andra hjälpmedel kan förstå den. Det betyder att du använder korrekt semantisk HTML (knappar är riktiga knappelement, inte div-element som formats som knappar), rätt rubrikhierarki och ARIA-etiketter där det behövs för att beskriva komplexa interaktiva element. Din butik ska fungera i olika webbläsare och på olika enheter.
Vanliga tillgänglighetshinder i webbutiker
Det här är de vanligaste tillgänglighetsproblemen i webbutiker:
Alt-text saknas eller är dålig för produktbilder
Många webbutiker saknar alt-text för produktbilder, eller har vag alt-text som "bild" eller "produktfoto". Användare av skärmläsare kan inte se bilder. Alt-texten måste beskriva det som är viktigt med bilden. För en röd t-shirt är bra alt-text "röd t-shirt i bomull med rund halsringning och bröstficka", inte "tröja" eller "röd tröja bild". För en väljare av produktvarianter kan alt-texten tydligt beskriva färgprovet eller stilalternativet. Varje produktbild behöver korrekt, beskrivande alt-text.
Formulär utan rätt etiketter
När ett formulärfält (e-postruta, telefonruta, adressfält) saknar kopplad etikett, eller etiketten bara är platshållartext, vet användare av skärmläsare inte vad de ska skriva. Korrekt märkta formulär har osynliga men tillgängliga etikettelement som talar om för skärmläsare vad varje fält är till för.
Ingen navigering med tangentbord
Vissa webbplatser kräver mus för att navigera eller slutföra ett köp. Användare som bara använder tangentbord kan inte använda rullgardinsmenyer, ser inte vilket element som är markerat eller kan inte tabba genom formulärfält i logisk ordning. Varje funktion ska gå att nå med tangentbord. Tangentbordsfokus ska synas på sidan så att användare vet var de är.
Dålig färgkontrast
Ljusgrå text på vit bakgrund kanske är läsbar för dig. Den är inte läsbar för personer med nedsatt syn. WCAG nivå AA kräver ett kontrastförhållande på minst 4,5:1 för vanlig text. Knappar, länkar och all text som användare behöver läsa måste uppfylla den standarden. Kontrollera din kontrast med ett gratis verktyg för kontrastkontroll.
Förvirrande rubrikstruktur
Användare av skärmläsare navigerar ofta på sidor genom att hoppa mellan rubriker. Om din sida hoppar från H1 till H3 till H2, eller använder rubriker bara för utseendet, blir upplevelsen förvirrande med skärmläsare. Använd rubriker i logisk ordning för att strukturera sidan. En H1 per sida, sedan H2 för huvudavsnitt och H3 för underavsnitt. Hoppa aldrig över rubriknivåer.
Knappar och länkar utan tydligt syfte
En knapp som säger "klicka här" säger inget till användare av skärmläsare om vad ett klick gör. Använd beskrivande knapptext: "Lägg i varukorgen", "Visa recensioner", "Gå till kassan". Om du behöver en knapp med en ikon, lägg till text eller en ARIA-etikett som beskriver åtgärden. Varje interaktivt element måste ha en tydlig, beskrivande etikett.
Otillgängliga rullgardinsmenyer och filter
Filtermenyer för produkter, kategorirullgardiner och sorteringsalternativ som bara fungerar med mus är vanliga hinder. Tangentbordsanvändare behöver kunna nå dem på samma sätt. Komplexa interaktiva komponenter behöver ARIA-roller och stöd för tangentbord för att fungera med hjälpmedel.
Så gör du din butik tillgänglig
Tillgänglighet kräver inte att du anlitar en dyr konsult eller köper specialprogram. Börja med grunderna:
1. Skriv alt-text för alla produktbilder
Det här är den ändring som ger störst effekt. Gå igenom dina produkter och skriv beskrivande alt-text för varje bild. Beskriv produkten, dess färg, material, skick och särskilda egenskaper. Testa din alt-text genom att läsa den högt. Förstår någon som inte kan se bilden produkten? Om inte, förbättra den.
2. Se till att alla formulär har rätt etiketter
Varje formulärfält måste ha ett etikettelement kopplat till sig i koden. Lita inte på platshållartext. Ta bort platshållartexten när fältet får fokus, eller behåll den men lägg till en riktig etikett. För grupper av kryssrutor och radioknappar, gruppera dem och märk dem tydligt. Felmeddelanden i formulär ska vara specifika och tala om exakt vad användaren ska rätta.
3. Kontrollera att navigering med tangentbord fungerar
Testa hela din butik med enbart tangentbord. Tryck på Tab för att navigera. Kommer du åt alla knappar, länkar och formulär? Kan du se var fokus är? Är tabbordningen logisk (vänster till höger, uppifrån och ned)? Om tangentbordsanvändare fastnar eller inte kommer åt något, åtgärda det. De flesta tillgänglighetshinder är hinder för tangentbordet.
4. Kontrollera och förbättra färgkontrasten
Använd ett gratis verktyg för kontrastkontroll på din produktsida, dina knappar, länkar och formuläretiketter. Se till att text har 4,5:1 kontrast för vanlig text och 3:1 för stor text (18 punkter eller större). Lita inte på enbart färg för att förmedla information (till exempel "röda varor är på rea"). Lägg till textetiketter eller ikoner som stöd.
5. Rätta din rubrikstruktur
Granska sidstrukturen. Du ska ha en H1 (sidans huvudtitel), sedan H2 för huvudavsnitt och H3 för underavsnitt. Hoppa aldrig över rubriknivåer. Använd rubriker för att strukturera innehållet logiskt, inte för utseendet. Om du behöver formaterad text som inte är en riktig rubrik, använd en div och CSS, inte en rubriktagg.
6. Skriv tydlig text för länkar och knappar
Användare av skärmläsare tar ofta fram en lista över alla länkar på en sida. Länkar ska vara begripliga utan sammanhang. "Läs mer om fraktalternativ" är bättre än "läs mer". "Visa produktrecensioner" är bättre än "läs recensioner". Knappar ska tydligt beskriva sin åtgärd: "Lägg i varukorgen", "Gå till kassan", "Spara till senare".
7. Testa med hjälpmedel
Ladda ned en gratis skärmläsare för Windows eller använd de inbyggda tillgänglighetsverktygen på Mac och iPhone. Lyssna på hur din webbplats låter. Kan du slutföra ett köp med enbart tangentbord och skärmläsare? Det är det verkliga testet av tillgänglighet. Många hinder blir uppenbara när du försöker använda din egen butik som blind användare eller användare som bara använder tangentbord.
Tillgänglighetstester och granskning
Testa din butik för tillgänglighet efter att du gjort ändringar. Börja med de här verktygen:
Automatiska testverktyg
Gratisverktyg som Lighthouse (inbyggt i Chrome) och andra automatiska tillgänglighetskontroller skannar dina sidor och flaggar vanliga problem som saknad alt-text, låg kontrast och dålig rubrikstruktur. De här verktygen fångar kanske 30 % av tillgänglighetsproblemen, så de är en startpunkt, inte hela svaret. Använd dem för en snabb skanning, men anta inte att ett grönt resultat betyder att din webbplats är helt tillgänglig.
Test med tangentbord
Navigera på din webbplats med enbart Tab, Skift+Tab, Enter och piltangenterna. Ingen mus. Det här är det viktigaste testet. Kan du slutföra varje uppgift? Fastnar du? Syns fokus? Är tabbordningen logisk? Om tangentbordsnavigeringen är trasig klarar inte din butik tillgänglighetsstandarden, oavsett vad automatiska verktyg säger.
Test med skärmläsare
Lyssna på din webbplats med en skärmläsare, till exempel den som är inbyggd på Mac. Beskriver skärmläsaren produktbilder tydligt? Förstår du formuläretiketterna? Är navigeringen begriplig? Finns det knappar eller länkar utan förklaring? Professionella tillgänglighetsgranskningar anlitar ofta blinda testare som använder din webbplats, men du kan hitta stora problem genom att göra grundläggande tester med skärmläsare själv.
Manuell kodgranskning
Kontrollera att din HTML-kod har korrekt semantisk markup. Knappar ska vara knappelement, inte formaterade div-element. Länkar ska vara ankartaggar. Formulärfält behöver etikettelement. Rubriker ska vara h1-, h2- och h3-taggar i ordning, inte h1, h3, h2. God semantisk HTML är grunden för tillgänglighet.
Så hjälper WEMASY med tillgänglighet
WEMASY:s webbplatsbyggare är byggd med tillgänglighet i åtanke. Plattformen har semantisk HTML-struktur, korrekt hantering av formulär med tillgängliga etiketter, menyer och varukorgsfunktioner som går att använda med tangentbord och verktyg för att enkelt lägga till alt-text på bilder. När du bygger din butik med WEMASY är den underliggande HTML-koden redan strukturerad för tillgänglighet. Du ärver ingen otillgänglig kod från plattformen.
Det betyder inte att din webbplats automatiskt är helt tillgänglig. Du behöver fortfarande skriva bra alt-text, använda tydligt språk och testa med riktiga användare. Men WEMASY:s grund tar bort många vanliga hinder som plågar andra e-handelsplattformar. Se vad som ingår i varje plan på vår prissida.
Affärsnyttan med tillgänglighet
Utöver att följa lagen är tillgänglighet bra affärer. Tillgängliga webbplatser är lättare att använda för alla, inte bara för personer med funktionsnedsättning. Tydligt språk, bra kontrast, logisk struktur och tangentbordsnavigering gynnar äldre användare, användare på mobila enheter, användare i bullriga miljöer och användare med långsamt internet. En webbplats som är tillgänglig för personer med funktionsnedsättning är en bättre webbplats för alla användare.
Mer direkt: 1 av 4 vuxna i USA har en funktionsnedsättning. Det är ungefär 65 miljoner människor. Om din butik inte är tillgänglig utesluter du en enorm marknad. Du lämnar också pengar på bordet. Blinda och synsvaga handlar online för miljarder. De vill köpa från din butik. Gör det möjligt.
På den juridiska sidan är risken verklig. Över 5 000 stämningar om webbtillgänglighet lämnades in under 2025. E-handelssajter står för 70 % av dessa fall. Ett kravbrev om brister i tillgänglighet kostar tid och juristarvoden att försvara sig mot. Att förlikas utan att åtgärda de underliggande problemen bjuder bara in fler krav. Det smartaste är att åtgärda din webbplats nu, dokumentera dina insatser och undvika problemet helt.
Kom igång
Om din butik inte är tillgänglig, få inte panik. Börja med åtgärderna som ger störst effekt: alt-text, tangentbordsnavigering och kontrast. De här tre ändringarna fångar de flesta tillgänglighetshinder. Testa med tangentbordsnavigering och en skärmläsare. Åtgärda problemen du hittar. Dokumentera ditt arbete. Testa igen regelbundet, särskilt efter ändringar på webbplatsen. Tillgänglighet är inte ett engångsprojekt, det är ett pågående arbetssätt för att bygga inkluderande.
Vanliga frågor
Omfattas verkligen min lilla butik av ADA?
Ja. ADA gäller alla företag som är öppna för allmänheten, oavsett storlek. Det finns inget undantag för småföretag. Om du säljer online omfattas din webbplats.
Vad är skillnaden mellan tillgänglig och regelenlig?
Tillgänglig betyder att din webbplats faktiskt går att använda för personer med funktionsnedsättning. Regelenlig betyder att den uppfyller en teknisk standard som WCAG 2.1 nivå AA. En webbplats kan tekniskt uppfylla standarden och ändå vara svår att använda, eller vara mycket användbar utan att vara tekniskt perfekt. Målet är båda: tillgänglig i praktiken och regelenlig mot standarden.
Behöver jag anlita någon för att göra min butik tillgänglig?
Inte nödvändigtvis. Om din butik har grundläggande brister (alt-text saknas, dålig kontrast, trasig tangentbordsnavigering) kan du åtgärda många av dem själv. Skriv alt-text, kontrollera kontrasten med ett gratisverktyg och testa med tangentbord och skärmläsare. Om din webbplats är byggd på en modern plattform med korrekt HTML-struktur är det ofta enkelt att förbättra tillgängligheten. Större webbplatser med komplex funktionalitet kan ha nytta av en professionell granskning, men små butiker kan ofta åtgärda sina största hinder på egen hand.
Vad gör jag om jag får ett kravbrev om tillgänglighet?
Ta det på allvar. Ignorera det inte. Kravbrev ger oftast en tidsram för att åtgärda bristerna. Arbeta med din utvecklare eller plattformens support för att åtgärda de specifika överträdelserna som nämns. Dokumentera allt du gör. Du kan också vilja rådfråga en jurist som känner till tillgänglighetslagstiftning. Att förlikas utan att åtgärda de underliggande problemen är ingen långsiktig lösning, åtgärda webbplatsen.
Gör det min webbplats långsammare om jag gör den tillgänglig?
Nej. Tillgänglighet och prestanda är separata saker. En webbplats kan vara snabb och otillgänglig, eller långsam och tillgänglig. Semantisk HTML (kodstrukturen som behövs för tillgänglighet) är ofta lättare och snabbare än dåligt skriven kod. Många tillgänglighetsförbättringar, som rätt rubrikstruktur och tydligt språk, påverkar inte hastigheten alls.
Täcker WCAG 2.1 nivå AA allt jag behöver för att följa lagen?
WCAG 2.1 nivå AA är den standard som de flesta rättsfall om tillgänglighet hänvisar till. Det är måttstocken domstolar har använt för att bedöma om en webbplats är tillgänglig. Att följa WCAG 2.1 nivå AA är det bästa sättet att visa att du tog tillgänglighet på allvar och uppfyllde den lagliga standarden.
Relaterad läsning: Integritetspolicy, cookiesamtycke och GDPR för din butik och Så skyddar du ditt varumärke och dina produkter från kopiering.