Tekstalternativer til billeder ("alt-tekst")

Billeder kan fx være fotos, illustrationer, diagrammer, hvor tekstalternativer formidler formålet med billedet og bruges af mennesker, der ikke ser billedet.

Mennesker, der er blinde og bruger skærmlæsere, kan høre alt-teksten blive læst op, og mennesker, der har fravalgt billeder, kan i stedet se alt-teksten. Teksten skal være funktionel og give en tilsvarende brugeroplevelse, og ikke nødvendigvis beskrive billedet.

Du ser normalt ikke alt-teksten på en webside. Den befinder sig i opmærkningen af websiden, fx <img src = "pointer_to_image.png" alt = "her er den alternative tekst">.

Hvert billede bør indeholde en alt-attribut i opmærkningen.

  • Hvis et billede formidler oplysninger, der er nyttige i forhold til at interagere med eller forstå websidens indhold, har det brug for en alternativ tekst.
  • Hvis et billede bare er dekorativt, og brugerne ikke behøver at vide noget om billedet, skal det have en tom alt-attribut (alt = "").

Automatiske tests kan fortælle dig, om der mangler en alt-attribut. For at afgøre om den alternative tekst er passende, er du nødt til at se billedet og vurdere det i sammenhæng.

Læs mere om gode alternative tekster i Digitaliseringsstyrelsens vejledning om tilgængelige billeder på nettet

Hvad skal man tjekke

At alle billeder har en alt-attribut med passende alternativ tekst.

Tjek af alt-tekst

Det er nemmest at tjekke alt-teksten, hvis du har WebDev-værktøjslinjen, men du kan godt gøre det uden.

  1. Åbn websiden du vil tjekke.
  2. I værktøjslinjen skal du vælge "Images", derefter "Outline images" og derefter "Outline images Without Alt Attributes". Du kan også bruge tastaturet ved at trykke: Alt + T, W (til webudvikler-udvidelse), I, O, A. Der vises røde felter omkring billeder, der mangler alt-attribut.WebDev-værktøjslinjemenu og røde felter omkring billeder.
  3. På værktøjslinjen skal du vælge "Images" og derefter "Display Alt Attributes". Eller med tastaturet: Alt + T, W (til webudvikler-udvidelse), I, A
    Alt-teksten vises foran billederne som hvide bogstaver på en rød baggrund.
    WebDev-værktøjslinjemenu og alt-tekst vist.
  4.  For hvert billede skal du se, om alt-teksten tilstrækkeligt formidler informationen i det billede, den er ved siden af i henhold til ovenstående tip.

  1. Åbn evalueringsværktøjet WAVE-webtilgængelighedsværktøjet
  2. Indtast web-adressen i feltet for den side du vil evaluere og tryk enter
  3. Hvis du finder det røde alt-ikon, betyder det, at følgende billede mangler alt-attribut.
    WAVE viser fejl i alt-tekst
  4. Hvis du finder det grønne alt-ikon, har billedet en alt-tekst. Ved siden grønne alt-ikoner er der tekst på en grøn baggrund, som viser den anførte alt-tekst. Se om denne tekst tilstrækkeligt formidler oplysningerne i billedet, den står ved siden af i henhold til ovenstående tip.

Brug et af de ovenfor anførte tjek og evaluér denne utilgængelige hjemmeside.

Bemærk den:

  • manglende alt-attribut
    • Der er mange billeder uden alt-tekst. Mange af disse er bare dekorative og skal have en tom alt-attribut i henhold til ovenstående tip.
    • Vejrbilledet af skyen og solen mangler alt-attribut.
  • upassende alt-tekst
    • Nær toppen, til venstre, ser du en lang alt-tekst, der begynder med ”Red dot with…”. Denne beskrivelse er alt for detaljeret og indeholder uvigtige oplysninger. Den relevante alt-tekst på den tilgængelige side er: "Citylights: your access to the city”.
    • I bunden af siden, midtfor, ses et billede af teksten: "(1) 269C-H-O-K-E". Alt-teksten er 123456789, hvilket ikke svarer til billedet.
  • passende alt-tekst
    • Nær toppen, se W3C-billedet, hvor alt-teksten er: "W3C logo".

Tips

Passende alternativ tekst er ikke en eksakt videnskab. Nogle mennesker foretrækker, at de fleste billeder har en detaljeret beskrivelse, mens andre foretrækker kortere beskrivelser.

  • Teksten skal have den samme betydning som billedet. Altså, hvis nogen ikke kan se billedet, så får de billedets vigtige information i den alternative tekst.
  • Alternativ tekst afhænger af kontekst. Hvis et billede af en hund fx bliver brugt på en hjemmeside for en kennelklub, så kan alt-teksten omfatte hundens race. Det samme billede brugt på en hjemmeside om en hundepark, kan være valgt for at gøre siden mere attraktiv, og så er billedet dekorativt og skal derfor have en tom alt-attribut. En måde at hjælpe med at tænke på passende alt-tekst er: hvis du hjalp en person, der ikke kan se en webside, med at læse og interagere med siden, hvad ville du så fortælle om billedet?
  • Billeder, der er funktionelle, som fx initierer handlinger (som tilmeldingsknapper) og billeder, der fungerer som link (fx navigation), har brug for alt-tekst, der svarer til den handling, brugeren udfører, hvis man aktiverer knappen.
  • Hvis der er tekst i billedet, fx i et logo, skal teksten medtages i alt-teksten.
  • Hvis billedet har komplekse oplysninger, såsom diagrammer eller grafer, skal billedet have en kort alt-tekst til at identificere billedet, og den detaljerede beskrivelse af informationen skal gives andetsteds, fx i en datatabel.

  • Hvis billedet ikke er vigtigt for at forstå indholdet, fx hvis det er dekorativt, skal det have en tom alt-attribut (alt = ""). En måde at hjælpe med at afgøre, om et billede skal have en tom alt-attribut, er at spørge sig selv om brugeren stadig ville få al information fra siden, hvis billedet blev fjernet?
  • Den alternative tekst behøver ikke at omfatte ordene "knap", "link" eller "billede af", da skærmlæsere giver disse oplysninger automatisk.
  • Hvis billedet er tilstrækkeligt beskrevet i teksten, fx et simpelt diagram, der illustrerer, hvad der er skrevet i websidens tekst, kan det have en kort alt-tekst såsom: "Diagram over arbejdsproces som beskrevet ovenfor".

I HTML er "alt" en attribut for billedelementer og andre elementer. Derfor er "alt-tag" teknisk forkert. Den korrekte terminologi er "alt-attribut" eller "alt-tekst". Det ser sådan ud i opmærkningen: <img alt = "WAI logo" src = "/ wai / logo.png ">