Standarder · WCAG 2.2

SC 1.1.1 Niveau A WCAG 2.0

Ikke-tekstindhold

Alle billeder, ikoner, diagrammer, lydfiler og andre ikke-tekstkomponenter skal have et tekstalternativ, der tjener samme formål — så brugere af skærmlæser, punktskrift og kontakter får den samme information som seende brugere.

Hvad det kræver

Ikke-tekstindhold — billeder, ikoner, diagrammer, animationer, CAPTCHA’er, lydindlejringer, sanseoplevelser — skal have et tekstalternativ, der formidler den samme information eller funktion. Tekstalternativet er det, som en hjælpeteknologi præsenterer for brugeren, når originalen ikke kan opfattes.

De fire kategorier, WCAG nævner:

  • Informative billeder skal have en alt-tekst, der beskriver den information, de formidler.
  • Funktionelle billeder (links, knapper) skal have en alt-tekst, der beskriver handlingen, ikke det visuelle.
  • Dekorative billeder får en tom alt-tekst (alt="") så skærmlæsere springer dem over.
  • Komplekse billeder (diagrammer, grafer) skal have en kort alt-tekst plus en længere beskrivelse tæt ved i teksten, i en <details>-blok eller via aria-describedby.

Sådan opfyldes det

  • Tilføj et alt-attribut til hvert <img>. Tomt hvis dekorativt, beskrivende hvis informativt.
  • Giv alle ikoner i <button> uden synlig tekst et tilgængeligt navn via aria-label, synlig tekst eller en SVG <title>.
  • For diagrammer og infografik: skriv en kort alt-tekst på én sætning og placer dataene i en tilgængelig tabel umiddelbart før eller efter figuren.
  • For CAPTCHA’er: tilbyd mindst ét ikke-visuelt alternativ (lyd-CAPTCHA, e-mailbekræftelse, server-side hastighedsbegrænsning).
  • For lyd, der formidler information (et podcast-preview, en UI-lyd), skal du levere et tekstækvivalent.

Typiske fejl

  • alt="billede" eller alt="billede af en person" — beskriver mediet, ikke indholdet.
  • Ikonknapper uden tilgængeligt navn (<button><svg /></button>). Skærmlæsere annoncerer „knap“ og intet andet.
  • Dekorative billeder uden alt="" — skærmlæsere falder tilbage til at læse filnavnet.
  • Diagram-<img>-elementer med diagramtitlen som alt-tekst, og de underliggende data er ingen steder på siden.
  • CSS-baggrundsbilleder med meningsbærende indhold og ingen tekstlabel i markeringen.

Hvorfor det er vigtigt

Dette er grundlaget for skærmlæsertilgængelighed. Et site, der ikke opfylder 1.1.1, er ubrugeligt for blinde brugere — hvert billede bliver en blindgyde. Det er også den hyppigst fundne fejl af axe og Lighthouse, fordi automatiserede værktøjer kan markere manglende alt-tekster, men ikke vurdere, om den alt-tekst, der er, er meningsfuld.