SevirantaDe 10 mest almindelige tilgængelighedsfejl i webshops (og hvordan du retter dem)
4. juni 2026
Kort svar. De fleste webshops fejler ikke på hundredvis af forskellige ting, men på den samme håndfuld fejl: for lav farvekontrast, manglende alt-tekster, knapper og links uden navn, felter uden label, en rodet overskriftsstruktur og mangelfuld tastaturbetjening. Den gode nyhed: netop derfor kan det løses — ofte i hele temaet, så én rettelse straks dækker hundredvis af sider.
WebAIM Million-undersøgelsen viser, at ~96% af alle forsider har målbare WCAG-fejl, og de koncentrerer sig om de ti nedenfor. Vil du vide, hvilke din side har? Nederst kan du scanne én side gratis.
1. For lav farvekontrast
Langt den mest almindelige fejl. Lysegrå tekst på hvid baggrund, eller en knapfarve der er en anelse for bleg, er ulæselig for svagsynede og i skarpt sollys på en telefon. Standarden kræver et kontrastforhold på mindst 4,5:1 for almindelig tekst (3:1 for stor tekst).
Løsning: gør tekst- eller baggrundsfarven mørkere eller lysere, indtil forholdet passer. I Shopify justerer du det én gang i dine temaindstillinger → farver, og det gælder straks for hele din butik. Læs mere i farvekontrast: WCAG-kravet, og hvordan du måler det.
2. Billeder uden alt-tekst
Et produktfoto uden alt-tekst er usynligt for en skærmlæser — en blind kunde ved så ikke, hvad produktet er. Det rammer direkte dit salg.
Løsning: giv hvert informativt billede en kort alt-tekst, der beskriver,
hvad der er på det. I Shopify: produkt → medier → "rediger alt-tekst".
Rent dekorative billeder får en tom alt (alt=""). Se
sådan skriver du alt-tekster, der virker.
3. Knapper uden navn
En knap, der kun viser et ikon (indkøbskurv, søgning, menu), bliver af en skærmlæser læst op som "knap" — uden at brugeren ved, hvad den gør.
Løsning: giv knappen tekst, eller et aria-label der beskriver handlingen,
for eksempel aria-label="Læg i kurv".
4. Links uden tydelig tekst
Ligesom med knapper: et link, der kun består af et ikon, eller "læs mere"-links uden kontekst, fortæller ikke en skærmlæser-bruger, hvor det fører hen.
Løsning: giv linket synlig, beskrivende tekst, eller et aria-label
("Se indkøbskurv" i stedet for et nøgent kurv-ikon).
5. Inputfelter uden label
Søge-, login- og checkout-felter uden tilknyttet label er svære eller umulige at betjene med hjælpeteknologi. Netop ved checkout koster det dig kunder.
Løsning: knyt et synligt <label> til hvert inputfelt (via for/id),
eller brug et aria-label, hvis der ikke er plads til synlig tekst.
6. En rodet overskriftsstruktur
Skærmlæser-brugere navigerer via overskrifter, ligesom du bruger en indholdsfortegnelse. Hvis du springer fra en H1 til en H4, eller kun bruger overskrifter til layoutet, bryder den struktur sammen.
Løsning: brug overskrifter i logisk rækkefølge (H1 → H2 → H3), og styr udseendet med CSS, ikke med overskriftsniveauet.
7. Manglende sprogattribut
Uden sprogattribut ved en skærmlæser ikke, om din side er på dansk eller engelsk, og læser alt op med forkert udtale.
Løsning: sæt lang="da" (eller det rigtige sprog) på <html>-elementet. I
Shopify ligger det i theme.liquid — som regel allerede til stede, men nogle
gange tomt.
8. Kan ikke betjenes med tastaturet
Mange mennesker bruger ikke en mus. Hvis en menu, slider eller pop-up kun virker med musen, eller hvis man ikke kan se, hvor fokus er, lukker du de besøgende ude.
Løsning: sørg for, at alt kan nås med Tab-tasten, at der er en synlig fokusramme, og at pop-ups ikke holder fokus "fanget".
9. Forkert brugt ARIA
ARIA-attributter kan hjælpe hjælpeteknologi — men brugt forkert eller ugyldigt gør de mere skade end gavn. Det sniger sig ofte ind via installerede apps eller temakomponenter.
Løsning: brug kun ARIA, hvor det er nødvendigt, og med gyldige værdier. Kommer det fra en app eller et tema, så tjek den komponent.
10. Ingen tydelig sidetitel
En side uden en unik <title> viser ikke et genkendeligt navn i browserfanen
og i skærmlæsere — at navigere mellem faner bliver til gætværk.
Løsning: giv hver side en unik, beskrivende titel. Shopify udfylder det som regel automatisk; tjek dine tilpassede skabeloner.
Hvad er den mest almindelige tilgængelighedsfejl?
For lav farvekontrast er langt den mest almindelige fejl — den ligger suverænt øverst i stort set alle større undersøgelser, fordi den ubemærket sniger sig ind i temafarver, knaptekster og prislabels. Samtidig er den en af de letteste at rette: sæt dine temafarver rigtigt én gang, og det gælder for hele butikken.
Kan du rette disse fejl på én gang?
Ofte, ja. Fordi en webshop arbejder med skabeloner, optræder den samme fejl som regel på hundredvis af sider på én gang — og kan derfor også repareres i hele temaet. Én justering i dit tema (farver, overskrifter, labels) dækker så hele din butik i ét hug.
Fanger en gratis scanning alle disse fejl?
En automatiseret scanning kan pålideligt fastslå cirka 57% af problemerne maskinelt; resten kræver menneskelig vurdering. De 57% omfatter netop fejlene ovenfor — kontrast, alt-tekster, labels, knapper, overskrifter — så en scanning afdækker straks broderparten, med rettelsen lige ved hånden.
Nysgerrig efter, hvilke af de ti der findes på din side? Indsæt din URL, og scan én side gratis i fuld dybde — uden konto, på under 60 sekunder.