Slik skriver du gode alt-tekster for bilder
Alt-tekst beskriver et bilde for folk som ikke kan se det. En god alt-tekst er kort, sier hva bildet gjør på siden, og står tom når bildet bare er pynt.
Hva alt-tekst er til
Alt-tekst er tekstalternativet til et bilde, skrevet i alt-attributtet. Skjermlesere leser den høyt, leselister for punktskrift viser den, og nettleseren viser den når bildet ikke lastes inn. Søkemotorer kan også bruke den. Nettstandarden for tilgjengelighet, WCAG, krever et tekstalternativ som gjør den samme jobben som bildet (suksesskriterium 1.1.1, nivå A).
Hovedtanken: alt-tekst er ikke en bildetekst, og ikke en beskrivelse av bildet for bildets skyld. Den sier hva bildet tilfører siden. Det samme bildet kan trenge ulik alt-tekst på to sider, eller ingen i det hele tatt.
Fire typer bilder
- Informative bilder tilfører mening: et fotografi, et ikon ved siden av et telefonnummer, et diagram. Skriv en kort alt-tekst som formidler denne meningen.
- Funksjonelle bilder står inne i lenker og knapper. Alt-teksten navngir handlingen eller målet, ikke bildet: «Søk» for et forstørrelsesglass, «Skriv ut denne siden» for et skriverikon.
- Dekorative bilder tilfører ingenting: en ramme, et mellomrom, en snirkel eller et bilde som bare gjentar teksten ved siden av. Gi dem et tomt alt-attributt (alt=""), slik at skjermlesere hopper over dem, eller legg dem i stilarket som bakgrunn.
- Bilder av tekst er en siste utvei. Trenger du et slikt, gjentar alt-teksten ordene i bildet. En logo som ikke er en lenke, får navnet på organisasjonen.
Slik skriver du en god alt-tekst
- 1Spør hvorfor bildet står på siden. Hva ville en besøkende gå glipp av hvis det var borte?
- 2Skriv det som betyr noe for dette formålet, i en frase eller i én setning.
- 3Begynn med innholdet. En skjermleser sier som regel at noe er et bilde, så «bilde av» eller «foto av» hjelper sjelden.
- 4Ikke gjenta det teksten ved siden av bildet allerede sier. Sier den alt, er bildet dekorativt og får en tom alt.
- 5Les alt-teksten høyt uten å se på siden. Gir den mening alene?
Vanlige feil
- Ingen alt-attributt i det hele tatt. Noen skjermlesere leser da opp filnavnet.
- Et filnavn eller en kode som alt-tekst, for eksempel «IMG_2041.jpg».
- Den samme rekken med søkeord på mange bilder. Alt-tekst er først og fremst for mennesker.
- En lang beskrivelse av et rent dekorativt bilde.
- Å beskrive utseendet til et knappebilde i stedet for handlingen. En søkeknapp er ikke «forstørrelsesglass», den er «Søk».
Hvor lang bør den være?
WCAG 1.1.1 nevner ikke noe antall tegn. Rådet fra W3C er å holde den kort, helst en frase eller en setning. For diagrammer og andre komplekse bilder gir du den fullstendige informasjonen som tekst på siden og holder alt-teksten kort. Trenger du mer enn en setning, bærer bildet sannsynligvis innhold som hører hjemme i teksten på siden.
Sjekk nettstedet ditt
For å finne bilder uten en nyttig alt-tekst kjører du den gratis alt-tekst-sjekken på en side. For å få forslag til mange bilder bruker du verktøyet Alt-tekster. Et automatisk forslag kan overse det som betyr noe på siden din, så les hver tekst og endre den når den ikke passer til formålet med bildet.
Do4U-verktøyene hjelper med skrivingen, ikke med avgjørelsen: om et bilde er informativt, funksjonelt eller dekorativt, vet du best selv. Sjekk igjen etter store endringer på nettstedet ditt.
Kilder
- W3C: Understanding 1.1.1 Ikke-tekstlig innhold (på engelsk) (www.w3.org)
- W3C WAI: Images Tutorial, beslutningstre (på engelsk) (www.w3.org)
- W3C WAI: Informative bilder (på engelsk) (www.w3.org)
- W3C WAI: Dekorative bilder (på engelsk) (www.w3.org)
- W3C WAI: Funksjonelle bilder (på engelsk) (www.w3.org)
- W3C WAI: Bilder av tekst (på engelsk) (www.w3.org)