Tilgængelige billeder på nettet

Blik klogere på de forskellige krav der stilles til tekstbaserede alternativer for billeder, og hvordan du afgør om et billede er dekorativt, informativt, funktionelt ellers komplekst.

Du skal altid tilbyde brugeren et tekstbaseret alternativ, når du bruger billeder på nettet. Det skal du, fordi tekst kan ændres til de formater, som brugerne har behov for. Det kan for eksempel være stor skrift, punktskrift, tale, symboler eller enklere sprog.

Det er vigtigt, at tekstalternativet er programmerbart og programmatisk associeret. Det vil for det første sige, at teksten skal kunne læses og bruges af de hjælpeteknologier, som mennesker med handicap bruger. Og for det andet, skal man kunne bruge sin hjælpeteknologi til at finde frem til det tilhørende tekstalternativ, når man lander på indhold, der ikke er tekst.

Guiden tager afsæt i den internationale standard for webtilgængeligt indhold, WCAG 2.1 – nærmere bestemt i retningslinje 1.1 om tekstbaserede alternativer.

Sådan laver du en god alternativ tekst

Når du laver en alternativ tekst, så husk, at du skal:

  • beskrive formålet med billedet – ikke hvad billedet forestiller.
  • aldrig indlede med ”billede af”, ”foto af” eller lignende. Den information fremgår i forvejen af koden.
  • fatte dig i korthed. En alt-tekst bør ikke overstige 255 anslag.

 
Her kan du læse om, hvad definitionen på en alternativ tekst er, samt hvad rammen er for brugen af billeder digitalt. 

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”).

Kategorier af billeder

Her kan du læse om de forskellige kategorier af billeder, og hvad der afgør, om det er dekorativt, informativt, funktionelt eller komplekst. 

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!

Hvis dit CMS gør det muligt, skal du markere dekorative billeder med en tom alt-attribut (alt=””).
Hvis ikke du selv kan gøre det, bør den tomme alt-attribut indsættes direkte i koden af en udvikler.

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

Motivet er fire affaldsbeholdere i forskellige farver. I sammenhængen viser billedet, at motivet kan behøve tre forskellige beskrivelser i alt-teksten.

  • 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

       YouTube Ikon som eksempel på et funktionelt billede.

  1. Hvis billedet er et link til en film på YouTube, kunne beskrivelsen være: ” Se filmen om sortering af affald på YouTube”.

    Grøn smiley som eksempel på et billede, der bliver brugt funktionelt i sammenhængen.
  2. Hvis billedet er et ikon, der linker til yderligere information, kunne beskrivelsen være: ”Læs den seneste miljøvurdering af Arnes Autoophug”.

    Ikon for pdf-fil som i sammenhægen er et eksempel på, hvordan man beskriver et funktionelt billede.


  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

Illustration som eksempel på komplekst billede af flag, tal og landenavne

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.

Illustration som eksempel for komplekst billede af kontakt med det offentlige

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.