De 10 vanligste tilgjengelighetsfeilene i nettbutikker (og hvordan du retter dem)
4. juni 2026
Kort svar: De fleste nettbutikker feiler ikke på hundrevis av forskjellige ting, men på den samme håndfullen feil: for lav fargekontrast, manglende alt-tekster, knapper og lenker uten navn, skjemafelt uten ledetekst, en rotete overskriftsstruktur og mangelfull tastaturbetjening. Den gode nyheten: nettopp derfor kan det løses, ofte i hele temaet, slik at én rettelse straks dekker hundrevis av sider.
WebAIM Million-undersøkelsen viser at ~96% av alle forsider har målbare WCAG-feil, og de konsentrerer seg om de ti nedenfor. Vil du vite hvilke av dem nettstedet ditt har? Nederst kan du skanne én side gratis.
1. For lav fargekontrast
Den klart vanligste feilen. Lysegrå tekst på hvit bakgrunn, eller en knappefarge som er et hakk for blek, er uleselig for svaksynte og i sterkt sollys på en telefon. Standarden krever et kontrastforhold på minst 4,5:1 for vanlig tekst (3:1 for stor tekst).
Løsning: gjør tekst- eller bakgrunnsfargen mørkere eller lysere til forholdet stemmer. I Shopify justerer du dette én gang i temainnstillingene → farger, og det gjelder umiddelbart for hele butikken din. Les mer i fargekontrast: WCAG-kravet, og hvordan du måler det.
2. Bilder uten alt-tekst
Et produktbilde uten alt-tekst er usynlig for en skjermleser, en blind kunde vet da ikke hva produktet er. Det rammer salget ditt direkte.
Løsning: gi hvert informativt bilde en kort alt-tekst som beskriver hva som
er på det. I Shopify: produkt → medier → "rediger alt-tekst". Rent dekorative
bilder får en tom alt (alt=""). Se
slik skriver du alt-tekster som virker.
3. Knapper uten navn
En knapp som bare viser et ikon (handlekurv, søk, meny), leses opp av en skjermleser som "knapp", uten at brukeren vet hva den gjør.
Løsning: gi knappen tekst, eller et aria-label som beskriver handlingen,
for eksempel aria-label="Legg i handlekurv".
4. Lenker uten tydelig tekst
Akkurat som med knapper: en lenke som bare består av et ikon, eller "les mer"-lenker uten kontekst, forteller ikke en skjermleserbruker hvor lenken fører.
Løsning: gi lenken synlig, beskrivende tekst, eller et aria-label
("Vis handlekurven" i stedet for et nakent handlekurv-ikon).
5. Skjemafelt uten ledetekst
Søke-, innloggings- og kassefelt uten tilknyttet ledetekst er vanskelige eller umulige å betjene med hjelpeteknologi. Nettopp i kassen koster det deg kunder.
Løsning: koble en synlig <label> til hvert skjemafelt (via for/id),
eller bruk et aria-label hvis det ikke er plass til synlig tekst.
6. En rotete overskriftsstruktur
Skjermleserbrukere navigerer via overskrifter, på samme måte som du bruker en innholdsfortegnelse. Hopper du fra en H1 til en H4, eller bruker overskrifter bare for utseendet, bryter den strukturen sammen.
Løsning: bruk overskrifter i logisk rekkefølge (H1 → H2 → H3), og styr utseendet med CSS, ikke med overskriftsnivået.
7. Manglende språkattributt
Uten språkattributt vet ikke en skjermleser om siden din er på norsk eller engelsk, og leser opp alt med feil uttale.
Løsning: sett lang="no" (eller riktig språk) på <html>-elementet. I
Shopify ligger dette i theme.liquid, som regel allerede på plass, men noen
ganger tomt.
8. Kan ikke betjenes med tastaturet
Mange bruker ikke mus. Hvis en meny, slider eller popup bare virker med musen, eller hvis man ikke kan se hvor fokus er, stenger du de besøkende ute.
Løsning: sørg for at alt kan nås med Tab-tasten, at det finnes en synlig fokusmarkering, og at popups ikke holder fokus "fanget".
9. Feil bruk av ARIA
ARIA-attributter kan støtte hjelpeteknologi, men brukt feil eller ugyldig gjør de mer skade enn nytte. Dette sniker seg ofte inn via installerte apper eller temakomponenter.
Løsning: bruk ARIA bare der det trengs, og med gyldige verdier. Kommer det fra en app eller et tema, så sjekk den komponenten.
10. Ingen tydelig sidetittel
En side uten en unik <title> viser ikke noe gjenkjennelig navn i
nettleserfanen og i skjermlesere, å navigere mellom faner blir ren gjetting.
Løsning: gi hver side en unik, beskrivende tittel. Shopify fyller dette som regel ut automatisk; sjekk dine tilpassede maler.
Hva er den vanligste tilgjengelighetsfeilen?
For lav fargekontrast er den klart vanligste feilen, den ligger suverent øverst i så godt som alle større undersøkelser, fordi den ubemerket sniker seg inn i temafarger, knappetekster og prisetiketter. Samtidig er den en av de enkleste feilene å rette: sett temafargene dine riktig én gang, og det gjelder for hele butikken.
Kan du rette disse feilene på én gang?
Ofte, ja. Fordi en nettbutikk er bygd på maler, dukker den samme feilen som regel opp på hundrevis av sider samtidig, og kan dermed også repareres i hele temaet. Én justering i temaet ditt (farger, overskrifter, ledetekster) dekker da hele butikken din med ett eneste grep.
Fanger en gratis skanning alle disse feilene?
En automatisert skanning kan pålitelig fastslå cirka 57% av problemene maskinelt (Deque-undersøkelsen); resten krever menneskelig vurdering. De 57% dekker nettopp feilene ovenfor, kontrast, alt-tekster, ledetekster, knapper, overskrifter, så en skanning avdekker brorparten med en gang, med rettelsen på kjøpet.
Nysgjerrig på hvilke av de ti som finnes på nettstedet ditt? Lim inn URL-en din, og skann én side gratis i full dybde, uten konto, på under 60 sekunder.