Tilgængelige billeder på nettet

Ifølge WCAG 2.1 standarden skal ”ikke-tekstbaseret indhold” på nettet altid have et tekstalternativ. Et tekstalternativ vil ofte – men ikke altid – være tilføjet billedet som en egentlig alt-tekst.

Den klassiske alt-tekst

Den klassiske alt-tekst bliver ikke vist som en del af dit indhold.

Alt-teksten fremgår af koden bag din webside, din app eller dit dokument og bli-ver især brugt af hjælpe-teknologier og søgemaskiner.

Billedtekster

En billedtekst bliver vist som en del af dit indhold og kan ses af alle brugere. Den kan også læses af hjælpeteknologier som for eksempel skærmlæsere.

Korte billedbeskrivelser på op til 255 anslag bliver typisk tilføjet som alt-tekst.

Hvis beskrivelsen er meget længere – og hvis informationerne ikke i forvejen fremgår som tekst i den kontekst, billedet bliver bragt i – bør du linke til en selvstændig tekstbeskrivelse. Det kan være som html eller som fil i et tilgængeligt dokumentformat.

Et billede kan være andet end et foto

Et billede behøver ikke altid være et foto. Det kan også være en grafik, et logo, et ikon, en knap eller lignende.

Formålet afgør formuleringen

Når du bruger et billede på nettet, skal du altid begynde med at spørge dig selv:

• Hvad er formålet med at bruge billedet i netop denne sammenhæng?
• Er billedet dekorativt, informativt, funktionelt eller komplekst?

Samme motiv kan have flere formål

Det er altid den konkrete kontekst, der afgør, om et billede er dekorativt, informativt eller funktionelt. Derfor vil der også være forskel på, hvilken alternativ tekst, du skal vælge fra gang til gang.

Sådan skal redaktøren beskrive billeder

Som redaktør vil du typisk tilføje et tekstalternativ via CMS’et. Det vil ofte være i form af en egentlig alternativ tekst – den de fleste kender under betegnelsen ”alt-tekst”.
Men et tekstalternativ kan også være en billedtekst, en selvstændig tekstfil eller en beskrivelse, der indgår som en del af det øvrige tekstindhold på siden.

Sådan skal udvikleren markere billedelementer

Billeder, der er oprettet som et html-element (<img>) skal altid have tilføjet en alt-attribut (alt=INDSÆT TEKST”) som beskriver billedet.
En source-attribut (<img src=>) angiver kun, hvor billedet bliver hentet. Den udgør ikke en alt-attribut.
Hvis billedet er oprettet som et div-element (<div>) kan du bruge ARIA koder til at beskrive billedet (aria-label=”INDSÆT TEKST”) eller (aria-label-ledby=”INDSÆT ID”).

Hvornår er et billede dekorativt?

Når du skal afgøre, om et billede, du bruger, er dekorativt i den konkrete sammenhæng, så spørg dig selv:

Ville brugeren miste noget, hvis jeg udelod billedet?

Hvis svaret er nej, er billedet kun til pynt og tilhører kategorien dekorative billeder.

Hvad gør redaktøren med dekorative billeder?

Et dekorativt billede skal ikke have en alternativ tekst. Du skal altså ikke give det en alt-tekst.

MEN!

Dekorative billeder skal markeres med en tom alt-attribut (alt=""), hvilket oftest understøttes af CMS'et.

Hvis ikke du selv kan gøre det, skal du kontakte en udvikler af CMS'et med henblik på at markere det dekorative billede korrekt.

Hvad gør udvikleren med dekorative billeder?

Et dekorativt billeder, som er tagget <img> skal markeres med en tom alt-attribut ( <img alt=””> )

Hvis billedet ikke er et <img> element, kan du bruge attributten role=”none”

Hvorfor skal jeg bruge tomme alt-attributter?

Hvis der ikke er tilføjet en alt-tekst til et billede, vil en skærmlæser lede efter anden information, den kan præsentere for brugeren. Og det vil typisk være filnavnet, den så læser op.

Et dekorativt billede markeret med en tom alt-attribut vil til gengæld blive ignoreret af skærmlæseren.

Tjek dit indhold uden billeder

Vidste du, at du kan downloade udvidelsen ”web-developer” til din Chrome, Firefox eller Opera browser?

Du finder den på web-adressen: chrispederick.com/work/web-developer/

Med web-developer kan du for eksempel slå visning af billeder fra og vurdere, om brugeren mister forståelse eller information uden billedet.

Hvornår er et billede informativt?

Ville brugeren miste noget, hvis du udelod billedet?
Hvis svaret er ja, er billedet informativt, og så skal du tilbyde et tekstalternativ.

Hvis billedet kan beskrives med færre end 255 anslag og ikke behøver være synligt rent visuelt, bør du bruge alt-tekst til beskrivelsen.

Forskellige alt-tekster til det samme billede

Det er formålet med billedet, der afgør, hvordan du formulerer beskrivelsen.

Eksempel på forskellige alt-tekster til samme billede

• Hvis billedet instruerer husejere i, hvordan de skal placere deres affaldsbeholdere, kunne alt-teksten være: ”I parcelhusområder skal dine skraldespande altid stå tæt sammen på en lige linje op ad et rækværk eller lignende”.
• Hvis billedet dokumenterer et konkret forhold i en offentlig klagesag vedrørende en nabostrid om placering af affaldsbeholdere, kunne alt-teksten være: ”På Engvej 23 har ejeren stillet fire 240 liter affaldsbeholdere op på en række lige ved naboens indkørsel”.
• Hvis billedet informerer om en ny placering af affaldsbeholdere på en bestemt lokation, kunne alt-teksten være: ”Affaldsbeholderne ved Børnehaven Billebo er flyttet om bag rækværket ved cykelstativerne ud mod Nørregade”.

Hvornår er et billede funktionelt?

Et billede er funktionelt, hvis det:

• er et link eller en knap
• er en del af et link eller en knap
• ville være svært at forstå, hvad linket eller knappen gør, hvis man fjernede billedet.

Hvordan beskriver man et funktionelt billede?

Tekstalternativet til et funktionelt billede skal beskrive, hvad der sker, når man aktiverer funktionen.

Eksempler på beskrivelse af funktionelle billeder

1. Hvis billedet er et link til en film på YouTube, kunne beskrivelsen være: ” Se filmen om sortering af affald på YouTube”.
   
   
2. Hvis billedet er et ikon, der linker til yderligere information, kunne beskrivelsen være: ”Læs den seneste miljøvurdering af Arnes Autoophug”.
   
   
   
   
   
3. Hvis billedet er et ikon, der linker til et dokument, kunne beskrivelsen være: Åbn pdf-filen med transskription af podcasten Sangstemmer”.

Hvornår er et billede komplekst?

Komplekse billeder består ofte af en kombination af farver, former og tal, og de rummer som regel store mængder information, som er formidlet visuelt.
Grafer, diagrammer, infografikker og lignende tilhører kategorien ”komplekse billeder”.

Hvordan beskriver man et komplekst billede?

Komplekse billeder er ofte en visuel opsummering af en stor mængde data, som gør det let at afkode de vigtigste pointer og tendenser.

Beskriv det komplekse billede ved at opsummere hovedpointerne i billedets alt-tekst (maksimalt 255 anslag).

Link eventuelt, hvis det er muligt og relevant, til de data, der ligger bagved.

Hvis informationerne i alt-teksterne allerede fremgår af den øvrige tekst på siden, vil brugeren ikke miste noget, hvis du udelader billedet. I så fald er billedet dekorativt og ikke informativt.

Eksempler på beskrivelse af komplekse billeder

De 649 medlemmer er fordelt på 21 lande. Tyskland topper listen med 96 medlemmer, mens Kroatien og Irland ligger i bunden med 11. Danmark har 13 medlemmer.



Det skal være lettere og mere overskueligt for borgerne at være i kontakt med det offentlige på nettet. I 2021 udvikler Digitaliseringsstyrelsen ti digitale guides, som skal knytte relevante digitale løsninger bedre sammen.