Alternativ tekst for bilder

Den alternative teksten skal beskrive bildet for brukere som har problemer med å se bilder.

Denne informasjonen er eldre enn 1 år og kan være utdatert

Informativt bilde skal ha gode alternative tekster

  • Alle informative bilder skal ha alternativ tekst.
  • Skriv kort og begynn med det viktigste.
  • I den alternative teksten skal du beskrive hva som er på bildet. 


Alternativ tekst vil ikke vises, men vil bli lest opp av skjermleser. 

Eksempel på et informativt bilde

Tulipaner i blomstring. Foto. - Klikk for stort bilde

 

 

 

 

 

 

 

Bilde av tekst

Ikke bruk bilde av tekst.

 

Tekst skal du så langt som mulig presentere som tekst, og ikke som bilde av tekst. 

 

Lenkede bilder

  • Den alternative teksten for lenkede bilder blir lenketeksten for sterkt svaksynte brukere. 
  • Beskriv lenkemålet i den alternative teksten til bilder. 

     
Gå til forsiden til Øygarden kommune - Klikk for stort bilde

 

 

 

 

Dekorative bilder

Merk at rent dekorative bilder skal ha attributt for alternativ tekst, men atributten skal være tomt, alt="".
 

 

 

På bakgrunn av dette, er alt-tekst fjernet i denne oversikten og bildet ikke klikkbart

Endringsønsker for alternativ-tekst

Test av alternativ tekst for bilder

  • Verktøy: WebDeveloper
  • Test at informative bilder har forklarende alternativ tekst.
  • Test at det ikke er benyttet bilder av tekst.
  • Test at lenkede bilder har alternativ tekst som forklarer lenkemålet.
  • Bannerbilder bilder regnes som illustrative bilder og skal ikke ha atributt for alternativ tekst.
     

 

 

Hvordan skal du benytte altattributt for bilder?
*Se forklaringer under tabellen

Inneholder bildet tekst?

Nei: Fortsett til 2 ⬇️

 

 

 

 

 

Ja, og hvis...

teksten er også i artikkelteksten i nærheten
Bruk et tomt altattributt. Se dekorative bilder

teksten vises kun for visuelle effekter.
Bruk et tomt altattributt. Se dekorative bilder

teksten har en spesifikk funksjon, for eksempel er et ikon.
Bruk altattributtet for å kommunisere funksjonen til bildet. Se funksjonelle bilder

og teksten i bildet er ellers ikke til stede.
Bruk altattributtet for å inkludere teksten til bildet. Se bilder av tekst .

2. Er bildet brukt i en lenke eller en knapp? Kan du unngå å bruke bilde som lenke?

Nei: Fortsett til 3 ⬇️

 

Ja:

Bruk altattributtet for å kommunisere lenkemålet for koblingen eller handlingen som er utført.

 

Bidrar bildet med mening til gjeldende side eller kontekst?

Nei: Fortsett til 4 ⬇️

Ja:

... og det er grafikk eller fotografi.
Bruk en kort beskrivelse av bildet på en måte som formidler den meningen i altattributtet. Se informative bilder.

… og det er en graf el.
Ta med informasjonen i bildet et annet sted på siden. Se komplekse bilder .

og det viser innhold som er overflødig for ekte tekst i nærheten.
Bruk et tomt altattributt. Se funksjonelle bilder .

4. Bidrar bildet med mening til gjeldende side eller kontekst?

Nei: Fortsett til 5 ⬇️

Ja:

... og det er en enkel grafikk eller fotografi.Bruk en kort beskrivelse av bildet på en måte som formidler den meningen i altattributtet.

… og det er en graf eller et komplekst stykke informasjon.Ta med informasjonen i bildet et annet sted på siden.

… og det viser innhold som er overflødig for ekte tekst i nærheten.Bruk et tomt altattributt.

5. Er bildet rent dekorativt eller ikke ment for brukeren?

Nei:

Denne guiden dekker ikke alle tilfeller.

Se om du finner mer informasjon på w3c sine sider om bildebruk

Ja:

Bruk et tomt altattributt.
Se Dekorative bilder .

 

WCAG kravnummer:   - 1.1.1 ikke-tekstlig innhold, 1.4.5 bilde av tekst