SevirantaDe 10 vanligaste tillgänglighetsfelen i nätbutiker (och hur du åtgärdar dem)
4 juni 2026
Kort svar. De flesta nätbutiker faller inte på hundratals olika saker, utan på samma handfull fel: för låg färgkontrast, saknade alt-texter, knappar och länkar utan namn, fält utan etikett, en rörig rubrikstruktur och bristfällig tangentbordsnavigering. Goda nyheter: just därför går det att lösa — ofta i hela temat på en gång, så att en enda fix direkt täcker hundratals sidor.
WebAIM Million-undersökningen visar att ~96% av alla startsidor har mätbara WCAG-fel, och de koncentreras till de tio nedan. Vill du veta vilka som finns på just din webbplats? Längst ner kan du skanna en sida gratis.
1. För låg färgkontrast
Det överlägset vanligaste felet. Ljusgrå text på vit bakgrund, eller en knappfärg som är aningen för blek, är oläslig för personer med nedsatt syn och i starkt solljus på en telefon. Standarden kräver ett kontrastförhållande på minst 4,5:1 för vanlig text (3:1 för stor text).
Lösning: gör text- eller bakgrundsfärgen mörkare eller ljusare tills förhållandet stämmer. I Shopify justerar du detta en gång i temainställningarna → färger, och det gäller direkt för hela butiken. Läs mer i färgkontrast: WCAG-kravet och hur du mäter det.
2. Bilder utan alt-text
En produktbild utan alt-text är osynlig för en skärmläsare — en blind kund vet då inte vad produkten är. Det slår direkt mot din försäljning.
Lösning: ge varje informativ bild en kort alt-text som beskriver vad den
visar. I Shopify: produkt → media → "redigera alt-text". Rent dekorativa
bilder får en tom alt (alt=""). Se
skriva alt-texter som fungerar.
3. Knappar utan namn
En knapp som bara visar en ikon (varukorg, sök, meny) läses upp av en skärmläsare som "knapp" — utan att användaren vet vad den gör.
Lösning: ge knappen text, eller ett aria-label som beskriver åtgärden,
till exempel aria-label="Lägg i varukorgen".
4. Länkar utan tydlig text
Precis som med knappar: en länk som bara består av en ikon, eller "läs mer"-länkar utan sammanhang, berättar inte för en skärmläsaranvändare vart den leder.
Lösning: ge länken synlig, beskrivande text, eller ett aria-label
("Visa varukorgen" i stället för en naken varukorgsikon).
5. Inmatningsfält utan etikett
Sök-, inloggnings- och kassafält utan kopplad etikett är svåra eller omöjliga att använda med hjälpmedel. Just i kassan kostar det dig kunder.
Lösning: koppla en synlig <label> till varje inmatningsfält (via
for/id), eller använd ett aria-label när det inte finns plats för synlig
text.
6. En rörig rubrikstruktur
Skärmläsaranvändare navigerar via rubriker, som du gör i en innehållsförteckning. Om du hoppar från en H1 till en H4, eller använder rubriker enbart för utseendet, bryts den strukturen.
Lösning: använd rubriker i logisk ordning (H1 → H2 → H3) och styr utseendet med CSS, inte med rubriknivån.
7. Saknat språkattribut
Utan språkattribut vet en skärmläsare inte om din sida är på svenska eller engelska, och läser upp allt med fel uttal.
Lösning: sätt lang="sv" (eller rätt språk) på <html>-elementet. I
Shopify finns detta i theme.liquid — oftast redan på plats, men ibland tomt.
8. Går inte att använda med tangentbordet
Många människor använder ingen mus. Om en meny, slider eller popup bara fungerar med musen, eller om det inte syns var fokus ligger, stänger du ute de besökarna.
Lösning: se till att allt går att nå med Tab-tangenten, att det finns en synlig fokusram, och att popuper inte håller fokus "fångat".
9. Felaktigt använd ARIA
ARIA-attribut kan hjälpa hjälpmedel — men fel eller ogiltigt använda gör de i stället skada. Det smyger sig ofta in via installerade appar eller temadelar.
Lösning: använd ARIA bara där det behövs och med giltiga värden. Kommer det från en app eller ett tema, kontrollera den delen.
10. Ingen tydlig sidtitel
En sida utan unik <title> visar inget igenkännbart namn i webbläsarfliken
eller för skärmläsare — att navigera mellan flikar blir en gissningslek.
Lösning: ge varje sida en unik, beskrivande titel. Shopify fyller oftast i detta automatiskt; kontrollera dina anpassade mallar.
Vilket är det vanligaste tillgänglighetsfelet?
För låg färgkontrast är det överlägset vanligaste felet — det toppar med god marginal i stort sett varje storskalig undersökning, eftersom det obemärkt smyger sig in i temafärger, knapptexter och prisetiketter. Samtidigt är det ett av de enklaste felen att åtgärda: ställ in dina temafärger rätt en gång, så gäller det för hela butiken.
Kan du åtgärda de här felen på en gång?
Ofta, ja. Eftersom en nätbutik bygger på mallar förekommer samma fel oftast på hundratals sidor samtidigt — och kan därmed också repareras i hela temat på en gång. En enda justering av ditt tema (färger, rubriker, etiketter) täcker då hela butiken i ett svep.
Fångar en gratis skanning alla de här felen?
En automatiserad skanning fastställer ungefär 57% av problemen tillförlitligt maskinellt; resten kräver mänsklig bedömning. De 57% omfattar just felen ovan — kontrast, alt-texter, etiketter, knappar, rubriker — så en skanning ger dig direkt lejonparten, med fixen på köpet.
Nyfiken på vilka av de här tio som finns på din webbplats? Klistra in din URL och skanna en sida gratis på fullt djup — inget konto, på under 60 sekunder.