Dersom du skulle beskrevet innholdet på en nettside til en person over telefon, hva hadde du sagt om bildene? Bruk dette som alt-tekst.

Hva?

Alt-tekster er korte, alternative tekster til ikke-tekstlig innhold, f.eks. bilder.

Hvorfor?

Tekstene hjelper brukere som ikke ser bilder. Dette kan være blinde eller svaksynte, eller de som har skrudd av bildevisning i nettleseren. Tekstene hjelper også Google til å forstå innholdet i bildene.
Alternativ bildetekst er kriterie 1.1 i Difis kvalitetskriterier på nett.

6 råd

1. Dekorasjon: Ikke skriv alt-tekst dersom bildet kun er til dekorasjon.

Skjermbilde av lyse.no der alt-teksten «Hastighet illustrasjonsbilde» ikke gir mening.

Dette bildet er kun for dekorasjon, og gir ingen mening for leseren. Det kan skape en stemning hos kunden, men fortjener ikke en alt-tekst. For en blind bruker vil det å høre «hastighet illustrasjonsbilde» før hun hører «Abonnementer og priser», kun være til irritasjon.

Riktig: ingen alt-tekst

2. Lenker: Si hvor lenken går dersom bildet er lenket. Alltid alt-tekst på klikkbare bilder!

Skjermbilde av lyse.no som viser riktig alt-tekst for lenkede bilder.

I utgangspunktet er disse bildene kun til dekorasjon, men i dette tilfellet er bildene klikkbare. De skal derfor ha alt-tekst. Her vil det være mer naturlig å beskrive meningen/målet med bildet, ikke beskrive motivet. I tilfeller der bildene ikke lastes vil alt-teksten din bli lenketekst.

Feil: «Åpen stekeovn»

Riktig: «Strøm for private»

PS. I dette tilfellet vil en blind bruker få opplest «Strøm Strøm for private» fordi Strøm først står som overskrift, og deretter leses alt-teksten. Dersom bildefilen ligger i samme a-tagg som overskriften kan alt-teksten fjernes.

3. Tekst: Dersom et bilde inneholder tekst, bruk samme tekst i alt-teksten.

Skjermbilde av lyse.no som viser alt-teksten altibox på altibox-logoen.

I Altibox-logoen vil det være mest naturlig å kun skrive inn teksten som bildefilen inneholder. Slik vil Google lese dette som «Tjenesten leveres av altibox».

Feil: «Bildet viser altibox-logo»

Rett: «altibox»

4. Mening: Beskriv meningen med bildet, ikke hva bildet viser.

Skjermbilde av lyse.no som viser et bilde med underbyggende informasjon med tom alt-tekst (feil).

Dette bildet har en mening, og er ikke kun til dekorasjon. Bildet inneholder tekst, men her vil det ikke bli naturlig å gjengi teksten. Ettersom denne siden er myntet på et ikke-teknisk publikum velger vi en ikke-teknisk alt-tekst. Dersom dette hadde vært en side på Lyse ITs intranett ville vi inkludert 802.11n 5GHz i forklaringen.

Feil: Hjemmesentral Aksesspunkt Klient Dekoder 802.11n 5GHz

Riktig: Trådløs forbindelse mellom hjemmesentral og dekoder via et aksesspunkt og en klient.

5. Grafer/illustrasjoner: Beskriv resultatene i grafen.

Skjermbilde fra lyse.no som viser eksempel på en graf over strømforbruk.

Her prøver vi etter beste evne å beskrive de viktigste resultatene. Brukeren vet at han er på forbrukssiden siden, derfor går vi rett på sak.

Feil: Graf over strømforbruk

Riktig: 2012: Des: 2250 kWh, Nov: 1700, Okt: 1500, Sept: 1000, Aug: 500.

PS! Dette eksempelet er ikke så relevant, ettersom en nettredaktør aldri vil kunne manuelt sette alt-tekst på et bilde med dynamisk innhold. Dersom bildet hadde vært statisk ville fortsatt samme alt-tekst gjelde. I dette tilfellet burde utviklerne lage dynamiske alt-tekster.

6. Mye informasjon: Sett utviklere på jobben!

Hva med bildefiler med mye innhold? Se på følgende eksempler:

Skjermbilde av lyse.no som viser bilde med mye informasjon og tom alt-tekst.

Hele det sorte feltet er ett bilde, men teksten er for lang til å skrives som alt-tekst. De lærde strides om maksimal lengde for alt-tekster, men det dreier seg om 100–150 tegn. Du må altså fatte deg i korthet.

Feil: «Altibox Chill – tv og film hvor du vil. Nå blir tv- og filmtjenesten til Altibox tilgjengelig på flere …»

Bedre: «Bestill Altibox Chill, få tv og film hvor og når du vil.»

Riktig: Få en utvikler til å lage hele feltet som ren HTML/CSS slik at kun fotografiet fra restauranten blir en bildefil. Bruk så tom alt-tekst på bildet (dekorasjon uten mening).

PS! Det finnes et longdesc-attributt for lengre tekster, men dette støttes dessverre av få publiseringsløsninger.

Et lignende eksempel er Altibox’ kanaloversikt:

Skjermbilde av lyse.no sin kanaloverskrift uten alt-tekst (feil)

Hele denne grafikken er én bildefil, og det er umulig å gjengi hele meningen med bildet med maks 150 tegn.

Feil: Kanaloversikt

Bedre: Altibox Chill, Chill In og Chill out har ulike kanalpakker.

Enda bedre: Del opp bildet i tre ulike bildefiler, og sett følgende tekster:

  1. «Altibox Chill har bl.a. TV Haugaland, TV Vest og TV Vestfold tilgjengelig, uten kostnad eller pålogging.»
  2. «Altibox Chill In har bl.a. NRK 1, 2, 3, TV 2, TV Norge, FEM, MAX, VOX i basispakken.»
  3. «Altibox Chill Out har bl.a. TNT, SVT1, SVT2, Eurosport, Cartoon Network i basispakken.»

Riktig: Få en utvikler til å sette opp kanaloversikten med ren HTML/CSS der hver kanal er en bildefil. Sett så én alt-tekst per bilde, f.eks. «NRK 1».

Lykke til med å sette gode alt-tekster på ditt nettsted! Har du forresten lest hvorfor universell utforming er viktig for deg?