5 tilgængelighedsfejl de fleste websites har

De 5 mest udbredte tilgængelighedsproblemer

Hvert år scanner WebAIM de 1.000.000 mest besøgte websites. Og hvert år finder de de samme fejl igen og igen. Disse 5 problemer findes på over 90% af alle websites — og de er alle relativt nemme at rette.

De 5 fejl er alle brud på WCAG 2.1 AA, den standard som tilgængelighedsloven bygger på.

---

1. For lav farvekontrast

WCAG-krav: 1.4.3 Kontrast (minimum)

Hvor udbredt: 83% af alle websites har dette problem.

Problemet: 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. Grå tekst på hvid baggrund er den typiske synder, men også farvet tekst på farvede baggrunde er problematisk.

Hvad WCAG kræver:

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

Sådan retter du det:

1. Tjek dine farver med et kontrastværktøj som WebAIM Contrast Checker
2. Undgå grå tekst under #767676 på hvid baggrund
3. Vær særlig opmærksom på placeholder-tekst i formularer — den har ofte for lav kontrast
4. Tjek at links er visuelt adskilt fra brødtekst (ikke kun med farve)

Hurtigt tjek: Brug vores WCAG-tjekliste til at teste kontrast manuelt på under 5 minutter.

---

2. Manglende alt-tekst på billeder

WCAG-krav: 1.1.1 Ikke-tekstligt indhold

Hvor udbredt: 58% af alle billeder mangler alternativ tekst.

Problemet: Billeder uden alt-attribut er fuldstændig usynlige for skærmlæsere. I stedet læser skærmlæseren filnavnet op — f.eks. "IMG_4523.jpg" eller "hero-banner-v2-final.png" — hvilket er meningsløst for brugeren.

Hvad WCAG kræver:

• Alle informative billeder skal have en beskrivende alt-tekst der formidler billedets indhold eller formål
• Dekorative billeder (rent visuelle, ingen information) skal have tom alt-tekst (alt="") så skærmlæsere springer dem over
• Komplekse billeder (grafer, diagrammer) skal have en uddybende beskrivelse tilgængelig

Sådan skriver du gode alt-tekster:

<!-- Informativt billede: Beskriv indholdet -->
<img src="team.jpg" alt="Holdet bag Inklu samlet til morgenmøde i kontoret">

<!-- 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.

---

3. Manglende labels på formularfelter

WCAG-krav: 1.3.1 Info og relationer og 3.3.2 Labels eller instruktioner

Hvor udbredt: 46% af alle formularfelter mangler en programmatisk tilknyttet label.

Problemet: Inputfelter uden tilknyttede labels gør det umuligt for skærmlæsere at beskrive, hvad feltet er til. Placeholder-tekst er ikke en erstatning for labels — den forsvinder når brugeren begynder at skrive og har typisk for lav kontrast.

Hvad WCAG kræver:

• Alle formularfelter skal have en synlig label der er programmatisk tilknyttet via <label> eller aria-label
• Labels skal tydeligt beskrive, hvad der forventes
• Obligatoriske felter skal markeres tydeligt

Sådan retter du det:

<!-- Korrekt: Label med for/id-kobling -->
<label for="email">E-mail</label>
<input type="email" id="email" name="email">

<!-- Forkert: Placeholder er IKKE en label -->
<input type="email" placeholder="E-mail">

<!-- Også korrekt: aria-label (når synlig label ikke er mulig) -->
<input type="search" aria-label="Søg på websitet">

Bonus: Gode labels forbedrer også brugervenligheden for alle. Brugere kan klikke på label-teksten for at fokusere feltet, og det er tydeligt hvad hvert felt er til — også efter man har udfyldt det.

---

4. Tomme links

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

Hvor udbredt: 18% af alle websites har links uden tilgængelig tekst.

Problemet: Links der kun indeholder et ikon, et billede uden alt-tekst eller slet intet synligt indhold, efterlader skærmlæser-brugere uden information om, hvor linket fører hen. Skærmlæseren vil typisk læse URL'en op, f.eks. "link: https://example.com/page/234" — ikke ligefrem nyttigt.

Typiske syndere:

• Sociale medie-ikoner uden tekst
• "Læs mere"-links der ikke beskriver hvad man læser mere om
• Billede-links uden alt-tekst
• Hamburger-menu-knapper uden label

Sådan retter du det:

<!-- Ikon-link: Brug aria-label -->
<a href="/facebook" aria-label="Følg os på Facebook">
  <svg>...</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>

---

5. Manglende dokumentsprog

WCAG-krav: 3.1.1 Sidens sprog

Hvor udbredt: 18% af alle websites mangler lang-attributten.

Problemet: Uden et lang-attribut på <html>-elementet ved skærmlæsere og andre hjælpeteknologier ikke, hvilket sprog siden er på. Resultatet er, at al dansk tekst kan blive udtalt med engelsk udtale — hvilket gør indholdet uforståeligt.

Sådan retter du det:

<!-- For danske websites -->
<html lang="da">

<!-- For engelske websites -->
<html lang="en">

<!-- Blandet indhold: Markér afsnit på andet sprog -->
<p>Læs mere i <span lang="en">Web Content Accessibility Guidelines</span>.</p>

Dette er den nemmeste fejl at rette — det er bogstaveligt talt én attribut. Tjek din HTML-skabelon og tilføj lang="da" hvis det mangler.

---

Sådan finder du fejlene på dit website

Alle 5 fejltyper kan findes med en automatisk scanning. Du behøver ikke at gennemgå koden manuelt — en gratis WCAG-scanning identificerer problemerne og viser dig præcis, hvilke HTML-elementer der skal rettes.

For en mere grundig gennemgang kan du supplere med 10 manuelle tests der fanger problemer som automatisk scanning ikke kan finde — f.eks. om alt-tekster faktisk er meningsfulde, eller om tastaturnavigation fungerer logisk.

Prioritér rigtigt

Ikke alle fejl er lige alvorlige. Prioritér dem der blokerer brugere helt:

1. Kontrast og alt-tekster — påvirker flest brugere
2. Formular-labels — blokerer opgavefuldførelse (køb, tilmelding, kontakt)
3. Tomme links — forvirrer navigation
4. Dokumentsprog — nemt at rette, stor effekt for skærmlæsere

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

---

Scan dit website gratis og find ud af, hvor mange af disse 5 fejl du har. Det tager under 60 sekunder.