Slik lager du en god alternativ bildetekst

En alternativ bildetekst, eller alt-tekst, er en beskrivelse av hva bilder på nett inneholder og hva bildene eventuelt lenker til. Alt-teksten er ikke det samme som en synlig bildetekst som du gjerne ser i aviser. Når noen ikke kan se bildene dine eller har slått av bildevisning, får de i stedet presentert alt-tekstene du har skrevet.

Dersom du lar alt-tekstfeltet stå tomt, risikerer du at bildenes filplassering og filnavn blir lest opp av skjermleseren i stedet. Filnavn som “IMG 1402.jpg” gir ingen informasjon og kan tvert imot virke forstyrrende for den som leser.

Du bruker alt-tekster for at nettstedet ditt skal være mest mulig brukervennlig og tilgjengelig for den som besøker deg. Samtidig gir du søkemotorene informasjon som gjør at de kan vise bildene dine i søkeresultatet når folk leter etter noe du tilbyr.

Bilder kan også vises i søkeresultatene som Google-bilder eller som bildepakker. Bildepakker er spesielle resultater som kan dukke opp hvor som helst, også øverst i søkeresultatene. Dette gir deg en ekstra mulighet til å få flere organiske besøkende.

Bilder er visuelle virkemidler som kan utdype meningen i en tekst eller fungere som dekorasjon. Bildeteksten gir deg bedre kontroll over hvordan innholdet ditt oppfattes. Gi derfor nødvendig informasjon og forklar gjerne poenger som bildet tilfører teksten. 

• Start med en øvelse: Beskriv bildets motiv for noen som ikke kan se det. Da har du trolig bildeteksten din klar.
  

• Informer om lenker: Alt-teksten din er lenketekst for den som ikke ser. Informer derfor presist om hvor lenken fører hen hvis bildet er det eneste lenkede elementet. Bildets motiv kan avvike fra dette. Du kan gjerne opplyse om motiv og medium til slutt i tillegg.
  

• Når bilde og lenketekst opptrer sammen: Dropp alt-tekst. Det gjelder for eksempel hvis du har et ikon i sammenheng med en beskrivende lenke. Da er lenketeksten fullgod som alt-tekst.
  

• Ved tekst i bildet: Bruk kun tekst i bilder der det er nødvendig, for eksempel i diagrammer. Alt-teksten skal beskrive kort den viktigste informasjonen i bildet. Inkluder detaljert informasjon i selve teksten. Hvis du vil ha tekst i bilder, har uutilsynet føringer for hvordan du gjør dette på best mulig måte.

Dersom bildet er grafisk dekor og inngår som en del av designet på nettsiden, skal du la alt-feltet stå tomt. Det vil være en fordel om disse bildene legges inn ved hjelp av CSS.

Dersom du har ansvar for et nettsted, er det lurt av deg å utarbeide noen retningslinjer for hvordan alt-tekstene skal skrives. Gjør kollegene dine kjent med standarden hvis dere er flere som publiserer bilder på nettstedet.

• Begynn med det viktigste.

  • Er bildet en lenke, skal målet for lenken stå først.

  • Bildets motiv og mening gjelder ellers.

• Opplys om medium til slutt. Er det foto, illustrasjon, grafikk?

Husk at det er god skikk å vise at lenkede bilder er lenker. Dersom du må bruke tekst i bilder, bør du sørge for at bildet er høyoppløselig. Grunnen til dette er at tekstkvaliteten blir dårligere når man zoomer inn, og da kan ikke skjermleser lese teksten i bildet.

Publiseringsverktøyet ditt skal ha et felt hvor du kan fylle inn alt-tekst. Ofte ser du det når du laster opp bilder eller så finner du det når du ser opplastede bilder. I både Wordpress og Craft kan du for eksempel se det i Mediegalleriet.

Når du har funnet alt-tekstboksen, er det bare å skrive inn teksten der. Her ser du hvordan det ser ut i koden:

Ikke bra - her mangler alt-tekst:

img src=”blomst.jpg” alt=””

Bedre - men lite deskriptiv:

img src=”blomst.jpg” alt=”blomst”

Bra - her kan man forestille seg bildet:

img src=”blomst.jpg” alt=”Rød tulipan i blomstring. Foto.”

Et godt tips når du skal skrive alt-tekst er å fatte deg i korthet. Prøv også å være konsekvent i måten du skriver på, og begynn alltid med det viktigste først. Spesifiser gjerne til slutt om det er et foto, en illustrasjon eller grafikk, slik at svaksynte enklere kan forstå innholdet ved bruk av skjermleser.

I eksempelet over har bildet en klar kontekst, det gjør at det er forholdsvis lett å beskrive bildets innhold på en måte som gjør at andre kan forestille seg innholdet. Men hva gjør du om bildet ikke har en spesifikk kontekst du kan ta utgangspunkt i? (Som type blomst og farge). Her må du bruke artikkelen eller nettsidens tema som utgangspunkt.

La oss se for oss at vi har et blogginnlegg om søkemotoroptimalisering. Dette blogginnlegget har et toppbilde av en dame som skriver på datamaskinen sin. Hva ville du valgt som alt-tekst til dette bildet? Her kommer et eksempel på en god og en dårlig alt-tekst basert på denne bloggartikkelens tema, søkemotoroptimalisering.

Ikke bra- knytter ikke alt-teksten til bloggartikkelens tema:

img src=”datamaskin.jpg” alt=”dame skriver på datamaskin”

Denne alternative bildeteksten ville normalt sett blitt ansett som en anstendig alt-tekst, men ettersom målet med å publisere dette bildet er å visualisere at en person jobber med søkemotoroptimalisering er ikke denne alt-teksten god nok!

Bra- Her knytter man alt-teksten til bloggartikkelens tema:

img src=”datamaskin.jpg” alt=”dame skriver søkeordsanalyse på datamaskinen. Foto”

Denne alternative bildeteksten er bedre da den får frem hvorfor denne damen skriver på datamaskinen, og det er fordi hun jobber med en søkeordsanalyse. På den måten har du knyttet alt-teksten til bloggartikkelens overordnede tema, søkemotoroptimalisering.

Ikke fyll alt-teksten med en oppramsing av søkeord uten sammenheng og kontekst. Det kan kanskje virke fristende, men det er en dårlig idé.

Oppramsing av stikkord og synonymer gir ingen verdi for dine besøkende. Du kaster bort tiden deres. Dessuten oppfatter Google dette som dårlig innhold og i verste fall spam. Du kan straffes og taper rangeringer.

Ikke bra - dette er spam:

img src=”blomst.jpg” alt=”blomst blomster stemorsblomst tulipan rose blomstre blomstring blomsterbed hage blomsterbukett 123blomster blomster no”

Dersom du vil være sikker på at de alternative bildetekstene dine gir mening for dem som besøker nettstedet ditt, kan du gjøre en test. Under ser du tre ulike testmetoder.

• Høyreklikk på bildet og velg “Inspiser” (i nettleseren Chrome). Da får du se koden i et panel som kommer opp.
  

• Deaktiver bilder i nettleseren for å få en rask oversikt over hvordan alt-teksten fungerer som erstatning for bildene. Dette kan gjøres i nettleserens innstillinger. I Chrome finner du dette under "Personvern og sikkerhet" >  "Innhold." Her kan man justere tillatelser for nettsider, og da kan du skru av visningen av bilder.  Dette er en enkel måte å sjekke om alt-teksten gir mening når bildene ikke vises. Holder det mål?
  

• Ved hjelp av en innebygd skjermleser kan du teste brukeropplevelsen med lukkede øyne. I Windows finner du for eksempel appen “Skjermleser”, og macOS/iOS har VoiceOver.

Alternativ tekst er ett av flere virkemidler du bør bruke for å ha et universelt utformet nettsted. Universell utforming handler om å ta hensyn til ulike brukere på nett ved at alle kan bruke én og samme løsning.

Les mer om universell utforming av bilder og grafikk hos Tilsynet for universell utforming av ikt. Der kan du også finne enkle kursmoduler og lære mer.

Lurer du på om nettstedet ditt er tilgjengelig nok? Få hjelp med universell utforming og søkemotoroptimalisering fra et SEO-byrå!