Zoom och flexibel layout i webbutiken: testa och rätta

25 oktober 2026

Så testar och rättar du zoom, textstorlek, text i bilder och textavstånd i webbutiken: 200 procent, 320 pixlar och WCAG 1.4.4, 1.4.5, 1.4.10 och 1.4.12.

Det här är teknisk vägledning och inte juridisk rådgivning. För tolkningsfrågor om Lag (2023:254) om vissa produkters och tjänsters tillgänglighet, vänd dig till Post- och telestyrelsen (PTS).

Den som ser dåligt förstorar ofta sidan i webbläsaren, och den som surfar på en liten skärm får samma förutsättningar. I en webbutik går det snabbt sönder: produktkorten läggs över varandra, menyn försvinner och knappen i kassan hamnar utanför bild. Fyra kriterier i WCAG 2.1 handlar om detta: Förändring av textstorlek, Text i form av bild, Flexibel layout och Utökade textavstånd. Alla fyra ligger på nivå AA. Den här guiden bygger på W3C:s förklaringar (Understanding) till kriterierna, lästa i oktober 2026.

Vad kriterierna kräver

Förändring av textstorlek (1.4.4). Utom för undertexter i video (captions) och text i bilder ska text kunna förstoras upp till 200 procent utan hjälpmedel, utan att innehåll eller funktion går förlorad. W3C räknar upp som typiska fel att text, bilder eller kontroller klipps, trunkeras eller skyms vid 200 procent (F69), att textfält och knappar inte följer med i storleken (F80) och att viewportenheter används på ett sätt som hindrar text från att växa (F94).

Text i form av bild (1.4.5). Går det att åstadkomma samma utseende med text ska text användas i stället för bild. Undantag finns för bilder där utseendet kan anpassas efter användaren och för fall där en viss presentation är väsentlig. W3C räknar logotyper, alltså text som ingår i ett varumärke, som väsentliga. Den som inte kan förstora en bild utan att den blir suddig drabbas, och en bild går inte att färga om efter behov.

Flexibel layout (1.4.10). Innehållet ska gå att visa utan förlust av information eller funktion och utan att användaren behöver rulla i två riktningar, vid en bredd motsvarande 320 CSS-pixlar för sidor som rullar lodrätt och en höjd motsvarande 256 CSS-pixlar för sidor som rullar vågrätt. Undantaget gäller delar som kräver tvådimensionell layout för att fungera eller betyda något. W3C nämner bland annat kartor, diagram, video och spel, och datatabeller (men inte enskilda celler). 320 pixlar motsvarar ett fönster på 1280 pixlar vid 400 procents zoom.

Utökade textavstånd (1.4.12). Ingen information eller funktion får gå förlorad när användaren sätter alla fyra värdena samtidigt: radavstånd minst 1,5 gånger teckenstorleken, avstånd efter stycken minst 2 gånger, bokstavsavstånd minst 0,12 gånger och ordavstånd minst 0,16 gånger. Kriteriet säger inte att din sida ska ha de värdena, utan att den tål att besökaren byter till dem. W3C noterar också att användaren får välja större värden än så.

Så testar du

Zooma till 200 procent. I webbläsaren: Ctrl och plustecknet (Cmd på Mac) tills zoomen står på 200 procent. Gå igenom startsida, kategori, produkt, varukorg och kassa. Syns all text? Går det att trycka på alla knappar? Finns menyn kvar?
Gå ner till 320 pixlar. Zooma till 400 procent i ett fönster som är 1280 pixlar brett, eller öppna utvecklarverktygen och ställ in en bredd på 320. Text, knappar och formulär ska gå att läsa och använda utan vågrätt rullning. Tabeller, kartor och video får rulla i sidled, helst i en egen ruta så att inte hela sidan får ett vågrätt rullningsfält.
Ändra textavstånd. Öppna webbläsarens konsol på en sida, klistra in koden nedan och titta efter text som klipps eller lägger sig över annan text. Koden är ett eget hjälpmedel för testet och inte något du lägger i butiken. Tillägg som sätter textavstånden finns också, men vi har inte jämfört dem här.

document.querySelectorAll("*").forEach((e) => {
  e.style.setProperty("line-height", "1.5", "important");
  e.style.setProperty("letter-spacing", "0.12em", "important");
  e.style.setProperty("word-spacing", "0.16em", "important");
});
document.querySelectorAll("p").forEach((p) => p.style.setProperty("margin-bottom", "2em", "important"));

Prova den smala höjden. Höjden 256 pixlar gäller bara sidor som är byggda för att rullas vågrätt, till exempel med lodrät text, och är sällan aktuell i en svensk webbutik. Ett bildband på en vanlig sida testar du i stället vid 320 pixlars bredd: varje panel ska få plats i bredden och gå att läsa utan att rulla i två riktningar.
Leta efter text i bilder. Kampanjbanners, prisbadgar och storleksguider görs ofta som bilder. Markera texten med musen: går det inte är det en bild. Finns samma text även som vanlig text bredvid bilden, räknar W3C det som uppfyllt.

Vanliga fel i webbutiker

Produktrutnät med fast bredd i pixlar, så att sidan blir bredare än fönstret.
Menyn döljs vid smal bredd utan att det finns en knapp som öppnar den.
Knappar och etiketter med fast höjd, där slutet av texten klipps när den förstoras.
Kampanjbilder där rabatten och villkoren står i själva bilden.
Priser som är gjorda som bilder.
Meta-taggen viewport med user-scalable=no eller maximum-scale=1, som hindrar besökaren från att zooma på mobilen.
Kassaformulär i två kolumner som inte bryts till en kolumn vid smal bredd.
Produktnamn i produktkort med overflow: hidden och fast höjd, där de sista orden försvinner när textavstånden ökar.

Så rättar du

Principerna är desamma i alla plattformar, men var du gör ändringen beror på tema och byggsätt.

Mät i relativa enheter. Använd rem eller em för teckenstorlek och för behållare som innehåller text. Fasta pixlar på rutor med text är den vanligaste orsaken till klippt innehåll. Teckenstorlek som räknas ut från fönstrets bredd med viewportenheter kan också hindra text från att växa vid zoom, vilket W3C räknar som ett eget fel (F94). Blanda då in rem, till exempel calc(1rem + 0.5vw).
Låt rutnät brytas. Flex och grid med wrap flyttar ner kort till nästa rad när det inte får plats.

.produktrutnat {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  gap: 1rem;
}

Sätt min-width: 0 på flexbarn som innehåller långa ord, och overflow-wrap: anywhere på produktnamn, så att långa ord bryts i stället för att trycka ut sidan.
Ge inte textrutor fast höjd. Använd min-height så rutan växer med texten.
Låt overflow-x: auto bara sitta på tabeller som verkligen behöver bredd, så att de rullar i sin egen ruta och inte hela sidan.
Tillåt zoom. Ta bort user-scalable=no och maximum-scale ur meta-taggen:

<meta name="viewport" content="width=device-width, initial-scale=1">

Skriv texten som text. Flytta rabatter, villkor och priser från bilden till HTML och lägg bilden bakom. Logotypen får vara en bild.
Kassaformulär: lägg fälten i en kolumn under en viss bredd och låt etiketten ligga ovanför fältet.

Vad våra verktyg gör

Månadsgranskningen i AccessAudit kontrollerar sidledsscroll vid 320 pixlar och vid 640 pixlar (vilket motsvarar 1280 pixlar vid 200 procents zoom) samt meta viewport, i en riktig webbläsare. Det gratis testet läser källkoden och hittar en viewport-metatagg som spärrar zoom, men det mäter varken zoom eller layout, så de stegen i guiden ovan måste du göra själv.

Så kontrollerar du butiken

Kör det gratis testet på butik.nightwave.se/tillganglighet för det som går att se i koden.
Gå igenom stegen under Så testar du ovan på de fem sidtyperna.
Gå igenom checklistan och läs Så testar du din webbutik mot WCAG 2.1 AA själv.
Skriv ned varje fel med sida, bredd, element och kriterium.

Nästa steg

Börja med kassan och produktsidan, eftersom det är där ett fel kostar köp. Fel i ett tema eller en app kan lämnas till den som byggt eller levererat det, med bredd, sida och kriterium. Den som vill ha löpande kontroll kan läsa om abonnemanget på butik.nightwave.se/tillganglighet. Det är teknisk granskning mot WCAG, inte juridisk rådgivning.

Läs även Färg och kontrast i webbutiken och Tangentbord och synligt fokus i webbutiken.

Källor

Läst oktober 2026.