Billeder har ofte en vigtig funktion på et websted, både som designelementer og til at understrege indhold. Og vi brugere flere og flere billeder i webdesign, sammenlign fx de to billeder herunder, der viser forsiden på dette websted i hhv. 2001 og 2024. Både billeder og ikoner har en langt mere fremtrædende plads.
Hvad er ALT tekster?
Men hvad nu, hvis man ikke kan se billederne, men kun får teksten?
Derfor har billeder en “ALT-tekst”, der kan give lidt af den samme oplevelse, hvis man skal opleve webstedet uden brug af billeder. ALT-tekst er en manuel beskrivelse af et billedes indhold, et alternativ til den visuelle visning.
Hvis man som blind eller svagtseende bruger en skærmlæser til at gennemgå webstedet, så kan det give en oplevelse tættere på det, den seende får. Det vi kalder ’tilgængelighed’.
Derfor bør du altid bruge ALT, hvor det giver mening.
Det har desuden den fordel, at det gør det lettere for søgemaskiner at indeksere dine billeder korrekt.
Og endelig giver det en erstatning i de tilfælde, hvor billedet af den ene eller anden grund ikke kan vises.
ALT tekst er:
- en mulighed for at give ikke-seende de samme muligheder for at forstå indhold, som seende har
- en mulighed for at spørge dig selv, hvorfor dette billede er relevant
- en mulighed for at forstå dit indhold bedre
ALT tekst er IKKE:
- et sted til at placere SEO nøgleord uden at forstyrre teksten (fx “wordpress webdesign udvikling SEO design hjemmeside”)
- en undskyldning for at fortsat at skabe billeder med tekst i
- et sted for en detaljeret gennemgang eller yderligere informationer, som seende ikke får
Forestil dig en sportsbegivenhed i radioen uden kommentator, fx en fodboldkamp. Eller hvis man som mig er nabo til et stort stadion. 2 x 45 minutter, hvor du kun hører publikums begejstring eller det modsatte.
Der mangler ligesom noget, ikke?
Kampoplevelsen er noget helt andet, når man får en træk-for-træk gennemgang af begivenhederne på banen – og ved i hvilken ende af banen, der bliver scoret!
Det er den ekstra ingrediens, som ALT-teksterne er for svagt- eller ikke-seende.
De giver dig også mulighed for at vurdere værdien af dine grafiske elementer. Hvis du har svært ved at beskrive et billedelement eller er nødt til at brugere langt over 125 tegn til det, så er det måske ikke det rigtige valg. Kan du finde et bedre billede – eller skal der overhovedet være noget billede her?
Vi ser stadig ind i mellem websteder, hvor ALT-teksterne er brugt til tilføje ekstra nøgleord til en tekst for at løfte SEO. Efter at der er kommet så meget fokus på at optimere tekst til søgemaskiner, så er det blevet set som en genvej til ‘smugle’ søgeordene ind nogle flere steder i teksten, hvor det ‘ikke genere nogen’.
Det er ikke sådan det virker. For det første ødelægger du oplevelsen, for dem som har behov for ALT-teksterne; for det andet kan søgemaskinerne godt se forskel. Og vil snart straffe dig for ringe eller helt manglende ALT-tekster. Så også her gælder det, at du skal skrive til dine brugere, IKKE til Google.
Myter om ALT-tekster
Inden vi fortsætter, så lad mig lige slå disse 6 myter til jorden.
Myte 1: ALT-tekst skal ALTID være objektiv og neutral, og undgå at give fortolkninger
Det er fint nok, at ville undgå at for subjektive ALT-tekster, men det skal stadig give mening i sammenhængen, passe med resten af siden indhold. Så hvis du fx er madblogger og har inkluderet et billede i en opskrift, så kan den sagtens indeholde ord som “lækker” eller “fabelagtig”.
Myte 2: Ikke-seende er ikke mit firmas målgruppe, så vi behøver ikke ALT-tekster.
Det har du overhovedet ingen anelse om. Blinde og svagtseende bruger de samme produkter, som andre. Ikke alle er født med begrænsningen, men er kommet til skade sent i livet. Og ønsker fortsat at købe de samme produkter som hidtil.
Myte 3: ALT-tekster tager for lang tid og er svære at skrive
Når det først bliver en vane, så tager det ikke længere tid end at skrive al anden tekst. Så jo før du kommer i gang, desto før bliver det nemt.
Myte 4: Hvert eneste billede og grafisk afbildning skal have en ALT-tekst
Nej, ikoner eller billeder, der kun er der for designets skyld, behøver ikke teksten. Og i nogle tilfælde er det faktisk langt bedre, at der IKKE er en tekst i feltet.
Myte 5: De bør ikke indeholde beskrivelser som kun seende kan forstår (fx farver)
“Vi ønsker jo ikke at fornærme nogen, vel?” Det gør du heller ikke, for blinde er helt vant til den slags. Vi bruger visuelle elementer overalt, så de kan ikke undgås. Som blind kender man måske ikke den visuelle udgave af en farve, men godt hvad den kan associeres med: rødt som blod, gul som sol osv.
Myte 6: Du behøver ALDRIG ALT-tekst på et billede, hvis der er en billedtekst
Billedtekst (caption) og ALT-tekst er to forskellige ting. Billedtekster er ofte meget mere bundet til kontekst end til det visuelle. Fx “Skovtur” eller “Kvinders dagligdag i 30’erne”.
Hvad er en god ALT-tekst?
For nemheds skyld, så lad mig lige tegne lidt ‘best practise’ i sandet. Nogle tommelfingerregler, der gør det nemt for dig at komme videre.
Undgå det åbenlyse “Et billede af …”
Lad være med at starte med “Dette er et billede af … ” eller “Her kan du se … “. Skærmlæsere annoncerer elementtypen, så det er overflødigt.
Men start gerne med noget, der fortæller om typen af billede: “Et fotografi”, “Et skærmprint”, “en stregtegning”
Brug korrekt sprog og tegnsætning
Det gør det lettere at forstå, når skærmlæseren læser det op. Ganske simpelt.
Enkelt sprog
Hold det enkelt, simpelt og passende kort. Og undgå specialtegn som fx “&”, når samme mening kan gives med “og”.
Et enkelt ord er sjældent nok
“Et billede siger mere end 1000 ord”, men du kan gøre det med et enkelt?
Undgå forkortelser
En skærmlæser kan springe til billedet, før den brugte forkortelse er blevet forklaret og dermed gøre teksten sværere at forstå. Sørg for at ALT-teksten også indeholder forklaringen.
Sigt efter 125 tegn
Det er kun en tommelfingerregel, men målet er at beskrive billedet i kontekst, ikke at tilføre nyt indhold.
Dårlig
Billedvæg
Bedre
Tre rammer på en væg
Bedst
Fotografi af tre billedrammer med sorte kanter på en hvid væg, som en udstilling på et museum. Rammerne er kvadratiske, lige store, men har intet indhold og viser kun en tom flade.
Dårlig
Ballonmand
Bedre
Mand med ballon
Bedst
Fotografi af person i orange sweater foran en orange væg, der holder en gul ballon med begge hænder op foran ansigtet, så den skjuler hele hovedet.
Dårlig
Computer
Bedre
Laptop med farver på
Bedst
Illustration af en åben laptop. På skærmen er en abstrakt figur med flere farver på en sort baggrund. Væggen bag og fladen under computeren er fuld af blå farve, som om det er smidt efter den.
Hvornår skal man IKKE bruge ALT-tekst?
Den helt korte udgave er:
Hvis ikke billedet har en indholdsmæssig funktion, men kun er et design element, skal der ikke laves ALT-tekst.
Det betyder, at hvis et billede eller en illustration ikke tilføjer noget ekstra til indholdet, ikke sætter en stemning, så er illustrationen indholdsløs og skal derfor ikke have en ALT-tekst.
Det gælder primært i situation, hvor en illustration bruges til opdele indhold eller visuelt fremhæve et område.
Farver
Denne behøver ingen ALT-tekst, da det kun er et visuelt element, der skal gøre det lettere visuelt at se et bestemt område. Den tilføre ikke noget til indholdet, som ikke allerede står der i forvejen.
Denne bør have en ALT-tekst, da den tilføjer en stemning til resten af siden indhold.
Hjælperedskaber
Alt-tag viewer: Firefox udvidelse til check af eksisterende ALT-tekster ( https://addons.mozilla.org/en-US/firefox/addon/alt-tag-viewer/ ).
Image Alt text Overlay: Chrome udvidelse til visning af ALT-tekster: ( https://chromewebstore.google.com/detail/image-alt-text-overlay/caaohcbbkinldlnkfhgggghkhjfdgjnm )
Equalize Digital ressourcer: ( https://equalizedigital.com/wordpress-accessibility-meetup/ )
ellegaard
Uddannet underviser, IT-administrator og WordPress-guru. Har arbejdet med design og udvikling af digitale løsninger siden 2005.
