Det er ikke bare å ta det perfekte bildet og deretter publisere det på nettsiden. Det er noen ting du alltid bør gjøre, før bildet havner på nettsiden din.
- Skalering – bildet du tar med mobiltelefonen eller kamerat ditt er altfor stort til å brukes på nettsiden. Skaler bildet ned til den størrelsen du trenger.
- Filstørrelse – tunge bilder gjør nettsiden din tregere. Sørg for å optimalisere alle bilder før de publiseres.
- Alt-tekst – alternativ tekst som beskriver bildet. Dette er temaet for resten av denne artikkelen.
Hva er alt-tekst?
Alt-tekst er en tekst som beskriver bildet.
- Hva er det bilde av?
- Hva slags type bilde (foto, illustrasjon, diagram osv.)
Hvorfor skal du bruke det?
- Alt-teksten vises dersom bildet ikke vises (feil med nedlasting, feil linking osv.). Uten alt-tekst vil ikke brukeren få noen indikasjon på hva det er bilde av (i noen nettlesere vil det bare være tomt, i andre vises et rødt kryss).
- Alt-teksten leses av skjermlesere. Dette betyr at de som ikke kan se bildet (og som bruker en skjermleser) vil få teksten opplest og få en forståelse av hva det er bilde av. Dette er et krav i henhold til loven om universell utforming.
- Søkemotorer (f.eks. Google) bruker alt-teksten ved indeksering av bilder.
Hvordan legger du til alt-tekst?
I en publiseringsløsning vil du få mulighet til å skrive inn alt-tekst når du setter inn et bilde. Resultatet i koden ser det slik ut:
<img src="kurslokaler.jpg" alt="Qross Kurssenter sine kurslokaler. Foto.">
Legg altså merke til at her beskriver vi både hva det er bilde av, og type bilde (foto).
Dette er en bildetekst og må ikke forveksles med alt-tekst. Alt-teksten er ikke synlig, med mindre du ikke ser bildet.
Hvilke regler gjelder?
Det er imidlertid noen regler å følge hva gjelder universell utforming.
- Alle bilder skal ha et alt-attributt. Men, ikke alle bilder skal ha en verdi i alt-attributtet…
- Dekorative bilder skal ha et alt-attributt, men det skal være tomt. Dette fordi det ikke gir noen mening å forklare hva disse bildene er.
<img src="linje.jpg" alt="">
- Bilder som er en link skal ha en alt-tekst som beskriver målet (linken), ikke bildet i seg selv. Eksempel:
<a href="https://www.qross.no/kurs/">
<img src="bilde.jpg alt="Qross Kurssenter kursoversikt">
</a>
Relaterte kurs
Del denne artikkelen: