← Blogg
Universell utforming

Alt-tekst er et WCAG-krav: slik skriver du det riktig

Alt-tekst blir ofte behandlet som en SEO-øvelse — fyll inn noen søkeord, så er saken grei. Men kravet kommer fra WCAG 1.1.1, det enkleste og mest grunnleggende suksesskriteriet i hele standarden. Og det er det UUTilsynet oftest finner brutt.

6 min lesing

WCAG 1.1.1 Ikke-tekstlig innhold er det aller første suksesskriteriet i standarden, på det laveste kravnivået, A. Kravet er enkelt å formulere: alt innhold som ikke er tekst — bilder, diagrammer, ikoner — skal ha et tekstalternativ som gir brukeren den samme informasjonen.

Enkelt å formulere, men ofte feil i praksis. Det er også et av de bruddene UUTilsynet finner oftest ved tilsyn, fordi det er lett å se — en skjermleser avslører manglende eller meningsløs alt-tekst umiddelbart.

Hvorfor alt-tekst ikke bare er en SEO-detalj

Alt-tekst har tre funksjoner. Skjermlesere leser den opp for synshemmede brukere. Nettleseren viser den hvis bildet ikke laster. Og søkemotorer bruker den til å forstå hva bildet viser.

Mange nettsteder fyller inn alt-tekst med søkeord i tankene, uten å tenke på skjermleserbrukeren. Resultatet blir tekst som er nyttig for Google, men ubrukelig for et menneske. Kravet i WCAG går motsatt vei: alt-teksten skal formidle samme informasjon som bildet gir seende brukere. SEO-verdien kommer som en bieffekt av at teksten er presis, ikke omvendt.

Fire typer bilder, fire ulike svar

Det vanligste feilgrepet er å behandle alle bilder likt. WCAG skiller mellom fire kategorier, og hver har sin egen løsning.

  • Dekorative bildertilfører ingen informasjon — bakgrunnsmønstre, dekorative streker, stemningsbilder uten konkret budskap. Disse skal ha tom alt-tekst (alt=""), ikke manglende attributt. Forskjellen er avgjørende: en tom alt-tekst får skjermleseren til å hoppe over bildet, mens et manglende attributt kan få den til å lese opp filnavnet i stedet.
  • Informative bilder viser noe konkret — produktbilder, teamfoto, illustrasjoner som forklarer et poeng. Disse trenger en kort, presis beskrivelse av det essensielle innholdet.
  • Funksjonelle bilder er lenker eller knapper, ofte ikoner. Alt-teksten skal beskrive hva som skjer når du klikker — «Lukk», «Søk», «Gå til handlekurv» — ikke hvordan ikonet ser ut.
  • Komplekse bilder som diagrammer, grafer og kart formidler mer enn én kort setning kan romme. Løsningen er en kort alt-tekst som gir hovedpoenget, kombinert med en fullstendig forklaring i teksten rundt. Er bildet i realiteten et skjermbilde av tekst, gjelder også WCAG 1.4.5 Bilder av tekst— ekte tekst skal foretrekkes fremfor tekst gjengitt som bilde, der det er praktisk mulig.

Slik skriver du god alt-tekst

Beskriv innholdet, ikke bildet som medium. «Diagram som viser omsetning» er unødvendig — skjermleseren har allerede fortalt brukeren at det er et bilde. Gå rett på det som betyr noe: hva diagrammet faktisk viser.

Unngå å starte med «bilde av» eller «foto av». Vær spesifikk fremfor generisk — «Daglig leder Kari Nilsen holder en produktpresentasjon for tre ansatte» er mer nyttig enn «personer i et møte». Og hold deg til det som er relevant for konteksten bildet står i. Et produktbilde på en nettbutikkside trenger andre detaljer enn samme bilde brukt som illustrasjon i en artikkel om bærekraft.

Vanlige feil

  • Manglende alt-attributt. Skjermleseren leser opp filnavnet — «IMG-4821 punktum jpg» — i stedet for noe meningsfullt.
  • Alt-tekst som gjentar filnavnet. «hero-banner-2» eller «forside-bilde-final» gir ingen informasjon om innholdet.
  • Dekorative bilder med beskrivende alt-tekst. Unødvendig støy for skjermleserbrukere som må høre gjennom beskrivelser av bilder uten informasjonsverdi.
  • For lang alt-tekst. Et helt avsnitt i alt-attributtet gjør at skjermleseren leser opp en lang tekst brukeren ikke ba om. Flytt den fulle forklaringen til brødteksten.
  • Ikoner uten funksjonsbeskrivelse. Et søppelbøtte-ikon med alt-tekst «søppelbøtte» sier ingenting om at det sletter en rad. «Slett» er riktig svar.

Sjekk bildene dine på ti minutter

Gå gjennom bildene på forsiden og de mest besøkte sidene, ett om gangen, med disse fem spørsmålene:

  1. Er bildet rent dekorativt?
    Da skal alt-teksten være tom — ikke fraværende.
  2. Fungerer bildet som en lenke eller knapp?
    Da beskriver alt-teksten funksjonen, ikke utseendet.
  3. Inneholder bildet tekst?
    Da skal samme tekst finnes i alt-attributtet eller i brødteksten rundt.
  4. Viser bildet noe konkret?
    Da trenger det en kort, presis beskrivelse av det essensielle.
  5. Er bildet et diagram, en graf eller et kart?
    Da trenger det en kort alt-tekst pluss en fullstendig forklaring i teksten ved siden av.

Denne gjennomgangen fanger de fleste alt-tekst-feilene, men den erstatter ikke en fullstendig manuell test. Se hvordan du tester tilgjengeligheten gratis for de andre gratis verktøyene som avdekker resten.

Videre lesning

Relaterte artikler