Vanliga tillgänglighetshinder i webbutiker
De flesta hinder i webbutiker är inte unika. De sitter i temat, i en app eller i ett skript, och de upprepas på varje produktsida. Här är de vi ser oftast.
Senast uppdaterad: 2026-10-20. Guiden är allmän information och inte juridisk rådgivning.
Variantväljare som inte går att nå
Storlek och färg väljs ofta i rutor byggda av div-element som bara reagerar på musklick. Med tangentbordet går det inte att välja, och då går det inte att lägga produkten i varukorgen.
Åtgärd: använd riktiga radioknappar eller en select-lista, eller ge egna komponenter rätt roll, tabindex och tangenthantering.
Ikonknappar utan namn
Varukorgen, sökningen, menyn och stängknappar är ofta bara en ikon. En skärmläsare säger då bara ”knapp”.
Åtgärd: ge knappen ett namn med synlig text eller aria-label, till exempel ”Varukorg, 2 varor”.
Varukorgslådor och popupar som fångar fokus
En varukorg som glider in från sidan, ett nyhetsbrevserbjudande eller en cookiebanner kan låsa fokus så att kunden inte kommer vidare, eller låta fokus vandra bakom rutan.
Åtgärd: flytta fokus in i rutan när den öppnas, håll det där medan den är öppen, låt Esc stänga den och lämna tillbaka fokus till knappen som öppnade den.
Låg kontrast
Ljusgrå text på vit bakgrund, priser i pastellfärger och text ovanpå bilder är svåra att läsa för många, inte bara för personer med nedsatt syn.
Åtgärd: minst 4,5:1 för vanlig text och 3:1 för stor text, ikoner och kanter på formulärfält.
Fokus som inte syns
Många teman tar bort webbläsarens fokusmarkering av designskäl. Då vet en tangentbordsanvändare inte var hen är.
Åtgärd: en tydlig fokusmarkering med god kontrast på alla länkar, knappar och fält.
Produktbilder utan alt-text
Alt-text (alternativtext) är en kort beskrivning av en bild som skärmläsare läser upp. WCAG-kriteriet 1.1.1 kräver den för bilder som bär information. Produktbilder utan alt-text, eller med filnamnet som text, säger ingenting till den som inte ser bilden.
Åtgärd: beskriv det som är viktigt för köpet, som färg, material och passform. Rent dekorativa bilder ska ha en tom alternativtext.
Formulär och felmeddelanden
Fält utan etiketter, platshållartext som enda instruktion och felmeddelanden som bara visas i rött gör kassan svår.
Åtgärd: en synlig etikett per fält, rätt autocomplete-attribut och felmeddelanden i text som säger vad som är fel och hur det rättas.
Overlay-widgets
En tillgänglighetsknapp som läggs ovanpå sidan ändrar inte koden som orsakar hindren. Den kan också krocka med de hjälpmedel kunden redan använder. Åtgärda hindren i temat eller koden i stället.