Alt-tekst på bilder: Slik skriver du den for søk og universell utforming

Alt-tekst er en kort beskrivelse av et bilde som ligger i alt-attributtet i HTML-koden. Skjermlesere leser den høyt, og Google bruker den for å forstå bildet. Skriv én presis setning om hva bildet formidler der det står, ikke en liste med søkeord. Rene pyntebilder skal ha tom alt-tekst (alt=""). For bedrifter er dette et lovkrav etter WCAG 1.1.1.

Hva er alt-tekst, og hvem leser den?

Alt-tekst, eller alternativ tekst, er en kort tekst i bildets HTML-kode (`alt="…"`) som erstatter bildet for dem som ikke ser det. Den leses av tre grupper: skjermleserbrukere, søkemotorer og alle som har et bilde som ikke laster. Uu-tilsynet beskriver det slik at den alternative teksten styrer hva brukere som har slått av bildevisning eller ikke kan se bildene, får presentert.

Mange blander alt-tekst, bildetekst og tittelfelt. Bildeteksten er den synlige teksten under bildet. Tittelen er stort sett et internt felt i publiseringsverktøyet. Alt-teksten ser du ikke, men den er den eneste av de tre som erstatter selve bildet. Uu-tilsynet sier rett ut at alt-tekst og synlig bildetekst brukes til ulike ting og ikke skal si det samme: Alt-teksten beskriver det visuelle, mens bildeteksten handler om handling og sammenheng.

Er alt-tekst et lovkrav for bedrifter i Norge?

Ja. Har bedriften en nettside som er rettet mot allmennheten, skal bilder som formidler noe, ha tekstalternativ. Kravet er suksesskriterium 1.1.1 «Ikke-tekstlig innhold» på nivå A, og Uu-tilsynet regner det som gjeldende for både offentlig og privat sektor, og for nettsider, apper og dokumenter.

Kravet kommer fra likestillings- og diskrimineringsloven § 18 og forskrift om universell utforming av IKT-løsninger. Private virksomheter skal oppfylle 35 krav i WCAG 2.0 på nivå A og AA, mens offentlig sektor fra 1. februar 2023 har fulgt WCAG 2.1. Vi har gått gjennom forskjellen nærmere i artikkelen om kravene til universell utforming og i oversikten over WCAG kravene. Alt-tekst er altså ikke noe du kan velge bort fordi du er en liten bedrift. Det er et av de mest grunnleggende kravene.

Konsekvensen hvis du bryter kravet: Digitaliseringsdirektoratet (Uu-tilsynet) kan kreve at feilen rettes, og saksgangen gir normalt åtte uker til retting før tilsynet kan vedta tvangsmulkt. Selv tilsynsmyndigheter gjør feil her. Forbrukertilsynet skriver i sin egen tilgjengelighetserklæring at sidetittelen automatisk legges inn som alternativ tekst på bilder i nyhetssakene, og oppgir det som et brudd på regelverket. Det er nyttig å vite: Automatisk utfylling fra sidetittel eller filnavn gjør at feltet ikke er tomt, men det oppfyller ikke kravet.

Hvordan skriver du en god alt-tekst?

Spør deg selv hva leseren går glipp av hvis bildet forsvinner, og skriv akkurat det i én setning. Uu-tilsynets eget eksempel er «Grønn tretralle med svarte hjul som står alene foran et gjerde.» Det er konkret og visuelt, uten innledning og uten søkeord. Ikke begynn med «Bilde av …», for skjermleseren sier allerede at det er et bilde. Vår tommelfingerregel er én setning, helst under 125 tegn, med det viktigste først.

Bilder som er lenker

Når et bilde er en lenke, blir alt-teksten lenketeksten. Den skal derfor fortelle hvor lenken går. Uu-tilsynet bruker et eksempel alle kjenner igjen: Det holder ikke å skrive «Facebook» hvis lenken går til virksomhetens egen side på Facebook. WordPress' egen håndbok for tilgjengelighet sier det samme: Har bildet en lenke, skal alt-teksten inneholde målet for lenken og ikke en beskrivelse av bildet. Det vi ser oftest, er logoer i toppen av nettsiden med alt-teksten «logo» eller bare firmanavnet. Skriv heller «Firmanavn – til forsiden».

Grafer, kart og andre sammensatte bilder

Sammensatte bilder trenger både et kort og et utfyllende tekstalternativ. Uu-tilsynet krever at bilder som er komplekse har både et kort og et utfyllende tekstalternativ. For en bedriftsside er den enkleste løsningen at alt-teksten gir hovedpoenget, og at tallene står i en vanlig HTML-tabell eller i brødteksten rett ved bildet. Det gjelder også kartutsnitt. Et kart som viser veien til butikken, bør få en alt-tekst som «Kart: inngang fra Strandgaten, 50 meter fra Torget holdeplass».

Hjelper alt-tekst på SEO og AI-svar i søk?

Ja, men bare når den beskriver bildet ærlig. Google skriver at de bruker alt-teksten sammen med maskinsyn og innholdet på siden for å forstå hva bildet handler om, og at alt-teksten fungerer som ankertekst når bildet er en lenke. I samme dokument advarer Google mot å fylle alt-attributtet med søkeord, fordi det gir dårlig brukeropplevelse og kan få nettstedet til å se ut som søppelinnhold.

Vårt råd: Bruk det ordet kundene faktisk søker på hvis det passer naturlig. Et bilde av et ferdig bad på en side om baderomsrenovering i Bergen kan godt nevne Bergen hvis bildet er derfra, men ikke fem varianter av «rørlegger Bergen». Google ber deg også oversette filnavnene når du lager bilder for flere språk. Vi anbefaler korte filnavn med bindestrek, for eksempel «flislagt-bad-dusjnisje.jpg», og å skrive æ, ø og å som ae, o og a for å unngå kodeproblemer i nettadressen.

AI-oversikter i Google (AI Overviews) og andre AI-svar i søk bygger på det søkemotoren allerede har forstått om siden. Bilder uten tekstalternativ er i praksis tomme for disse systemene. Derfor legger vi inn strukturerte data og maskinlesbar oppbygning som standard på nye nettsider: Det er de sidene vi ser bli plukket opp av AI-søk først. Flere grep finner du i artikkelen om tips til søkemotoroptimalisering.

I tekniske SEO-gjennomganger hos Box er de tre vanligste funnene manglende/feil canonical-tagger, uoptimaliserte bilder og treg mobil-lastetid — alle tre er normalt løst på under en arbeidsdag.

Når alt-tekst ikke er riktig løsning

Ikke alle bilder skal beskrives. Pyntebilder, skillelinjer og ikoner som gjentar teksten ved siden av, skal ha tom alt-tekst (`alt=""`) slik at skjermleseren hopper over dem. Uu-tilsynet sier at dekorative skillelinjer ikke skal ha alt-tekst, og at bilder av tekst som bare er pynt, skal ha tom alt-tekst. En enkel test: Tenk deg at bildet er borte. Mister siden verken informasjon eller funksjon, er det pynt.

• Tom er ikke det samme som manglende. `alt=""` betyr «hopp over». Mangler hele attributtet, leser skjermleseren filplasseringen og filnavnet, og det er svært forstyrrende.
• Viktig tekst skal ikke ligge i bilder. Overskrifter, priser og åpningstider i et bilde må gjengis i alt-teksten. Bedre er det å skrive dem som vanlig tekst på siden, slik at de også virker på mobil, kan oversettes og kan kopieres.
• Ikke dobbeltbeskriv. Står navn og tittel i bildeteksten, skal de ikke stå i alt-teksten i tillegg.
• Bakgrunnsbilder i CSS kan ikke ha alt-tekst. Hvis bildet formidler noe viktig, må det legges inn som et vanlig bilde.

Vi fraråder å skrive «illustrasjonsbilde» eller «dekorativt bilde» som alt-tekst. Enten formidler bildet noe, og da beskriver du det, eller så er det pynt, og da skal feltet være tomt. Flere konkrete eksempler på riktig og feil bruk finner du i artikkelen med eksempler på universell utforming.

Slik rydder du alt-tekstene på en eksisterende nettside

Begynn med sidene som gir inntekter, og jobb deg utover. For de fleste bedriftssider er det forsiden, tjenestesidene og kontaktsiden, ikke bloggarkivet fra 2019.

• Kartlegg. Kjør en gjennomsøking med et SEO- eller tilgjengelighetsverktøy og hent ut alle bilder som mangler alt-attributt eller har tom alt-tekst. Fremgangsmåten står i artikkelen om å sjekke nettsider.
• Sorter på sidetype. Lag en liste med forside, tjenestesider, produktsider og kontaktside først. Blogginnlegg tar du til slutt.
• Merk hvert bilde som meningsbærende, lenke eller pynt. Bruk tabellen over. Lenkede bilder og logoer er oftest feil, så ta dem først.
• Skriv alt-tekstene i et regneark før du legger dem inn. Da kan en annen person lese gjennom dem på fem minutter, og du ser om flere bilder har fått samme tekst.
• Legg inn tekstene der bildet faktisk vises, ikke bare i mediebiblioteket (se fallgruven under).
• Test med skjermleser. VoiceOver på Mac og iPhone eller NVDA på Windows er gratis. Lytt gjennom én tjenesteside og hør om den gir mening uten bildene.
• Lag en fast rutine. Legg alt-tekst inn i gjennomgang for publisering og i den jevnlige driften av nettsiden.

Fallgruvene i WordPress som de fleste går i

WordPress lagrer alt-teksten to steder: i mediebiblioteket og i selve innlegget der bildet er satt inn. Teksten fra mediebiblioteket blir standard når du setter inn bildet neste gang, men endrer du den i mediebiblioteket etterpå, blir bilder som allerede er publisert, normalt ikke oppdatert. Da må du åpne hver side og rette bildeblokken. Fremhevet bilde («featured image») henter alt-teksten fra mediebiblioteket. I tillegg skriver WordPress' egen håndbok at manglende alt-tekst i mediebiblioteket blir til alt="" på nettsiden. Det betyr at et glemt felt stille og rolig merker bildet som pynt. Det gir ingen feilmelding, men skjermleserbrukeren får ingen beskrivelse. Mer om oppsett av bilder og metadata finner du i artikkelen om søkemotoroptimalisering i WordPress.

Andre verktøy som Wix, Squarespace og Shopify har egne alt-tekstfelt med samme logikk, men de kan ligge på forskjellige steder for galleri, bakgrunnsbilde og produktbilde. Velger du nytt publiseringsverktøy, bør du ha med i kravspesifikasjonen at alt-tekst og «dekorativt bilde» kan settes per bilde og for hver gang bildet brukes.

Hva koster det, og hvem bør gjøre jobben?

Kostnaden er nesten bare arbeidstid. Du trenger ingen lisens, og verktøyene for kartlegging og testing finnes gratis. Det som avgjør prisen, er hvor mange bilder du har, og om publiseringsverktøyet lar deg rette dem samlet eller én og én. En nettside med noen titalls bilder klarer de fleste å rydde selv på en ettermiddag. En nettbutikk med tusenvis av produktbilder krever en plan, ofte med AI-utkast som et menneske kontrollerer, og eventuelt maler basert på produktdata.

Vi mener at teksten bør skrives av noen som kjenner fagområdet og kundene, mens nettutvikleren sørger for at feltene finnes, at ingenting fylles inn automatisk og at temaet skriver ut `alt=""` riktig. Kjøper du ny nettside, skal dette være med i tilbudet. Se hva som normalt inngår i prisen på en nettside. Er bildene i tillegg store og trege, lønner det seg å komprimere dem i samme runde, siden du likevel går gjennom hvert bilde.

Vil du ha en nettside der alt-tekst, bildekomprimering og universell utforming er satt opp riktig fra starten? Se hvordan vi jobber med nettsider for bedrifter.