Side med indholdsfortegnelse

Denne guide er til dig, der vil sikre, at du har styr på webtilgængeligheden, når du håndterer billeder på et websted, i en mobilapplikation eller i et dokument.

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.

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. 

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.

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.