5 tilgængelighedsfejl vi fandt igen og igen på 213 danske webshops

Tidligere på året scannede vi 213 e-mærkede danske webshops for at få et billede af tilstanden i dansk e-handel før tilgængelighedsloven trådte i kraft. Vi forventede variation mellem brancher og virksomhedsstørrelser. I stedet fandt vi det samme mønster — igen og igen.

Fem specifikke fejltyper dukkede op på et flertal af de scannede sites. Her er hvad vi fandt, hvor det kommer fra teknisk, og hvordan du retter det.

Top 5 — fra vores eget scan-corpus

#	Fejltype	Andel af scannede webshops
1	For lav farvekontrast	69%
2	Links uden tilgængeligt navn	65%
3	Billeder uden alt-tekst	52%
4	Manglende landmark-struktur	46%
5	Knapper uden tilgængeligt navn	27%

Stikprøve: 213 e-mærkede danske webshops med 10–249 ansatte. 169 af dem leverede valide scanningsdata; resten blokerede automatiserede crawlere. Læs mere om metoden i den fulde rapport.

---

1. For lav farvekontrast — 69%

Den mest udbredte fejl. Tekst med for lav kontrast mod baggrunden er svær at læse — ikke bare for svagtseende, men for alle i stærkt sollys, på en dårlig skærm eller med trætte øjne.

WCAG kræver:

• Normal tekst: Mindst 4.5:1 kontrast mod baggrunden
• Stor tekst (over 18pt eller 14pt fed): Mindst 3:1
• UI-komponenter og grafiske objekter: Mindst 3:1

I vores scan af folketingspartiernes sider var Alternativets forside et ekstremt eksempel: 53 kontrastfejl på én enkelt side. Radikale Venstre havde 32. Det er ikke designfejl af typen "vi har valgt en lidt for lys grå". Det er systemfejl der breder sig, fordi designsystemet ikke har en kontrast-tjek indbygget.

Sådan retter du det:

1. Vælg ikke grå tekst under #767676 på hvid baggrund — den fejler 4.5:1
2. Tjek dine farver med WebAIM Contrast Checker
3. Vær særlig opmærksom på placeholder-tekst i formularer — den har næsten altid for lav kontrast
4. Tjek at links er visuelt adskilt fra brødtekst (ikke kun med farve)

WCAG-krav: 1.4.3 Kontrast (minimum)

---

2. Links uden tilgængeligt navn — 65%

Det her tal overraskede os. WebAIM's globale undersøgelse af 1 million forsider viser kun 18% med tomme links. På danske webshops fandt vi det 3,6 gange højere.

To årsager dominerer:

1. Sociale medie-ikoner — Facebook, Instagram, LinkedIn — som rene SVG'er uden alt-tekst eller aria-label. Vi fandt det på over halvdelen af de scannede sites.
2. Hamburgermenu-knapper uden labels. Det tre-stregede ikon er konvention for seende, men en skærmlæser kan ikke se konvention.

Borgernes Parti var det værste eksempel i vores parti-scan: 48 links uden tilgængeligt navn på én forside. SF havde 23. Enhedslisten 7.

For en skærmlæserbruger lyder det således: "link, link, link, link, link..." — ingen idé om hvor noget fører hen.

Sådan retter du det:

<!-- Ikon-link: Brug aria-label -->
<a href="/facebook" aria-label="Følg os på Facebook">
  <svg aria-hidden="true">...</svg>
</a>

<!-- Billede-link: Alt-tekst på billedet -->
<a href="/produkt">
  <img src="produkt.jpg" alt="Se produkt: Ergonomisk tastatur">
</a>

<!-- "Læs mere": Gør teksten specifik -->
<a href="/artikel">Læs mere om tilgængelighedsloven</a>

WCAG-krav: 2.4.4 Formål med link og 4.1.2 Navn, rolle, værdi

---

3. Billeder uden alt-tekst — 52%

Mere end halvdelen af de scannede webshops havde billeder uden alt-tekst. På en webshop hvor billeder er afgørende for købsbeslutningen, betyder det at en ikke-triviel del af din målgruppe ikke kan vurdere produktet.

For søgemaskiner gælder samme begrænsning: Google kan ikke "se" et produktbillede — den læser alt-teksten. Webshops uden alt-tekster er usynlige i Googles billedsøgning. Det er samme arbejde der løser begge problemer.

Tre typer billeder, tre tilgange:

<!-- Informativt billede: Beskriv indholdet -->
<img src="produkt-stol.jpg" alt="Sort ergonomisk kontorstol med justerbare armlæn">

<!-- Dekorativt billede: Tom alt-tekst -->
<img src="divider.svg" alt="">

<!-- Funktionelt billede (link/knap): Beskriv funktionen -->
<img src="search-icon.svg" alt="Søg">

<!-- Billede med tekst: Gentag teksten -->
<img src="banner.jpg" alt="50% rabat på alle kurser i januar">

Tommelfingerregel: Forestil dig at du ringer til en ven og beskriver websiden. Hvad ville du sige om billedet? Det er din alt-tekst.

WCAG-krav: 1.1.1 Ikke-tekstligt indhold

---

4. Manglende landmark-struktur — 46%

Næsten halvdelen af de scannede sites havde indhold der ikke lå inden for et ARIA-landmark som <main>, <nav>, <header> eller <footer>.

Det lyder teknisk, men effekten er konkret: skærmlæsere navigerer ved at hoppe mellem landmarks. Hvis dit primære indhold er i en <div> uden rolle, kan brugeren ikke springe direkte til det. De skal Tab sig igennem hele headeren først.

I vores parti-scan var SF, Moderaterne, Radikale Venstre og Borgernes Parti alle ramt af denne fejl.

Sådan retter du det:

Brug HTML5-elementerne korrekt:

<header>...</header>
<nav>...</nav>
<main>
  <article>...</article>
</main>
<aside>...</aside>
<footer>...</footer>

Eller — hvis du er låst til <div>-elementer — brug ARIA:

<div role="banner">...</div>
<div role="navigation">...</div>
<div role="main">...</div>
<div role="contentinfo">...</div>

WCAG-krav: 1.3.1 Info og relationer

---

5. Knapper uden tilgængeligt navn — 27%

Den mindst udbredte af de fem — men også den fejl der direkte blokerer transaktioner. "Læg i kurv"-knapper, søge-knapper og hamburgermenu-knapper der kun er ikoner uden tekst.

Selv for seende brugere er knapper uden tekst en barriere. Et hamburger-ikon (☰) er konvention for de fleste — men en 60-årig bruger der ikke er vant til moderne webdesign, kan stå af. Knapper med tekst konverterer bedre end knapper med kun ikoner. På tværs af alle brugergrupper.

Sådan retter du det:

<!-- Ikon-knap med synlig tekst -->
<button>
  <svg aria-hidden="true">...</svg>
  <span>Læg i kurv</span>
</button>

<!-- Ikon-knap uden synlig tekst -->
<button aria-label="Søg">
  <svg aria-hidden="true">...</svg>
</button>

WCAG-krav: 4.1.2 Navn, rolle, værdi

---

Hvad vi tog med fra de 213 scans

To observationer der ikke står i WebAIM's globale undersøgelse:

1. Danske webshops har 3,6× flere tomme links end gennemsnittet globalt. Det er ikke en lille forskel. Det er et mønster der peger på at danske bureauer og udviklere systematisk overser dette punkt.

2. Større virksomheder klarer sig værre. Webshops med 100–249 ansatte havde i gennemsnit kun score 22. Dem med 50–99 ansatte havde 46. Det er kontraintuitivt — man ville forvente at flere ressourcer giver bedre kvalitet. Vores hypotese: i større organisationer bliver tilgængelighed et delt ansvar mellem marketing, IT og e-commerce, og det falder mellem stolene.

Sådan finder du fejlene på dit eget website

Alle fem fejltyper er automatisk-detekterbare. En scanning tager under 60 sekunder og viser præcis hvilke HTML-elementer der skal rettes. Det er ikke det samme som en fuld WCAG-audit — vi anbefaler stadig at supplere med 10 manuelle tests — men det er det rette første skridt.

Prioritering

Hvis du har begrænset tid:

1. Kontrast og alt-tekster — påvirker flest brugere, hurtigst at rette
2. Knapper og links uden tekst — blokerer transaktioner direkte
3. Landmark-struktur — kræver lidt mere arbejde, men én rettelse løser problemet på alle sider

Hvis din virksomhed er omfattet af tilgængelighedsloven, er disse fejl ikke bare dårlig praksis — de er lovbrud.

---

Scan dit eget website og se hvor mange af de fem fejl du har. Det tager under 60 sekunder.