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 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.

Krav til alt-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 Difi føringer for hvordan du gjør dette på best mulig måte.

Egne regler for bilder som er en del av designet

Dersom bildet er grafisk dekor og inngår som en del av designet på nettsiden, skal du la alt-feltet stå tomt. Du kan også legge inn bildene 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.

Gode huskeregler

• 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.

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 på opplastede bilder. I både Wordpress og Craft kan du for eksempel se det i Mediegalleriet. Her er eksempel fra Craft:

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.

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

Oppramsing av stikkord og synonymer gir ingen verdi til 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.
• Prøv Lynx, en nettleser som kun viser tekst. Ved å se på nettstedet ditt gjennom denne nettleseren, vil du raskt få innblikk i hvordan en blind eller svaksynt person opplever nettstedet ditt. 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”.

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 Direktoratet for forvaltning og IKT (Difi). Der kan du også finne enkle kursmoduler og lære mer.

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