Kategorier
Tip og trick fra mig til dig

Den gode alt-tekst

Teksten på billedet siger: Webtøjskassen. Tips og tricks - fra mig til dig.

Brænder du også for at skabe værdifuld web for alle? Så er det vigtigt, at du kan lave gode alternative tekster til de brugere, som ikke kan se dine billeder, grafikker og lignende.

Når vi taler webtilgængelighed, bliver billeder, grafikker og lignende illustrationer beskrevet som “ikke-tekstbaseret indhold”. De krav, som Loven om webtilgængelighed stiller til ikke-tekstbaseret indhold, er beskrevet i WCAG 2.1 standardens succeskriterium 1.1.1.

Standarden siger at: “Alt ikke-tekstbaseret, der præsenteres for brugeren, har tilknyttet et tekstbaseret alternativ, som har samme formål,” (og så følger der nogle undtagelser).

Det er selvfølgelig vigtigt at overholde loven. Det er endnu vigtigere at lave web, der rent faktisk fungerer i praksis. For alle.

Brugere, som ikke kan se dit indhold, tilgår det typisk med understøttende teknologier som for eksempel skærmlæsere og punktskrift (braille) tastaturer.

Her får du mine anbefalinger til, hvordan du laver gode alternative tekster, så alle dine brugere har glæde af dine billeder og grafikker. Også de, der ikke kan se dem.

Hvad er meningen?

Når du vælger at bruge illustrationer, skal du allerførst spørge dig selv: “Hvad er formålet med at bringe illustrationen? Ville brugeren miste noget, hvis jeg fjernede den?”. Det kunne være tab af mening, sammenhæng eller egentlig information.

Hvis svaret er nej, har din illustration udelukkende et dekorativt formål.

Dekorative illustrationer behøver ikke have alternative tekster. Her hjælper du bedst dine ikke-seende brugere ved at sikre, at illustrationen er markeret med en tom alt-attribut i selve koden. Det sikrer, at den assisterende teknologi simpelthen ignorerer illustrationen. Spørg din webmaster, hvordan det fungerer med tomme alt-atributter i det CMS-system, du bruger.

Hvis formålet med din illustration derimod rækker ud over at “skabe lidt liv” eller “peppe siden lidt op”, skal den have en alternativ tekst.

Sådan bygger du alt-teksten op

Det tager tid at bruge en skærmlæser. Derfor er alt overflødigt indhold bare støj, som stjæler skærmlæserbrugerens tid.

En alternativ tekst bliver læst op fra start til slut. Det er ikke muligt at springe tilbage til et bestemt punkt i teksten og lytte til noget igen. Misser du noget, skal du finde tilbage til alternativ teksten og lytte forfra.

Den alternative tekst bør derfor ikke fylde mere end to-tre linjer (cirka 255 anslag).

En skærmlæser tager afsæt i koden bag en hjemmeside. Derfor ved den, når den møder et billede, en grafik, et link, en tabel, en liste og så videre. Og det fortæller den brugeren.

Derfor skal du IKKE indlede dine alternative tekster med ord som: “Grafik af”, “Billede af”, “Link til” og lignende. Hvis det har betydning, hvilken TYPE grafik, der er tale om, kan du for eksempel skrive: “Søjlediagrammet viser udviklingen i” eller “Grafen illustrerer en markant stigning i”.

Og ud over tal og bogstaver bør din alternative tekst ikke indeholde andre tegn end komma eller punktum.

Komma fortæller skærmlæseren, at den skal holde en kort pause, og punktummet signalerer en lidt længere pause i oplæsningen. Alle andre tegn som for eksempel semikolon, tankestreg og lignende bliver simpelthen læst op som det, de er.

Hver illustration skal have sin egen alternative tekst. Du kan ikke bruge én tekst til en gruppe af billeder eller figurer. Hvis du af uransagelige grunde har brug for en fælles alternativ tekst til en række illustrationer, skal du sørge for først at gruppere disse, så de fremstår som ét element for skærmlæseren, og så give dem en alt-tekst.

Beskriv kun hovedpointer i alt-teksten

Den alternative tekst skal opsummere dit formål med at bringe illustrationen i den konkrete sammenhæng. Den skal IKKE kompensere for, at brugeren ikke kan se og formidle alle de detaljer i illustrationen som den seende kan opfatte.

Et eksempel

Lad os lege, du skal lave en tekst til kommunens hjemmeside om overvægt blandt børn i din kommune og om kommunens indsats på området.

Du har modtaget tal fra sundhedsplejen, der viser udviklingen i vægt blandt eleverne i 8. og 9. klasse i perioden 2010 – 2020 og vælger at præsentere disse data i et søjlediagram. Diagrammet offentliggør du som illustration på siden sammen med din tekst, som uddyber tallene og udviklingen.

Den alternative tekst kunne lyde: “Udviklingen i vægten hos eleverne i 8. og 9. klasse fra 2010 – 2020. Diagrammet viser en markant stigning i antallet af overvægtige unge.”

Beskriv illustrationens indhold i brødteksten

Dine illustrationer bør aldrig stå alene som formidling af indhold. Du bør se dem som elementer, der understøtter indholdet i din brødtekst.

Beskriv indholdet af dine figurer, modeller og lignende med ord i selve teksten.

Den alternative tekst, du lægger på illustrationen, skal derimod beskrive den grundlæggende idé med at bringe illustrationen.

Lav tilgængelige tabeller

Hvis dine illustrationer præsenterer en stor mængde data, kan det være svært at få en udførlig beskrivelse flettet med ind i den primære tekst.

Hvis dine data egner sig til præsentation i en tabel, er det en god måde at skabe overblik på. En rigtigt opmærket tabel kan sagtens læses af en skærmlæser og er et godt supplement til en indholdsrig illustration (eller måske er illustrationen i virkeligheden alternativet til din tabel).

Lav udvidede beskrivelser for sig selv

Hvis du ved, at det kun er en mindre gruppe særligt interesserede brugere, der interesserer sig for detaljerne i dine data, kan det være en god idé at lave lange beskrivelser som selvstændige html-elementer. Så kan du linke fra illustrationen til den udvidede tekstbeskrivelse.

Du kan også vælge at pakke den lange beskrivelse ind i et folde-ud element på siden med en god og forklarende titel som overskrift på elementet. Personligt er jeg stor fan af folde-ud moduler (harmonikaer/accordions), men der er stor forskel på, hvor godt de fungerer i forhold til webtilgængelighed. Det kan blandt andet være svært at afbalancere behovene mellem de, der bruger kraftig zoomfunktion, og de, der bruger skærmlæser.

Der findes desværre ikke en “one size fits them all” løsning, der er super optimal for alle brugere. Mit bedste råd er altid: Spørg dine egne brugere, hvad der virker for dem – og gør det let for dem at komme med feedback til dig, hvis de oplever udfordringer med dit indhold.

Sinnet Ellehauge Haag - portræt

Skriv et svar

Din e-mailadresse vil ikke blive publiceret. Krævede felter er markeret med *