Dersom du skulle beskrevet nettsidens innhold til en person over telefon, hva hadde du sagt om bildet? Bruk dette som alt-tekst.

Transkript

1 Hvordan skrive gode alt-tekster? Av Anders Ekkje Slettebø, Sist oppdatert 10. januar For hvem? Dette dokumentet er laget for Lyses nettredaktører, og forutsetter kjennskap til hvordan alttekster settes i publiseringsløsningen. Spørsmål om dette kan rettes til Lyse IT. Hva? Alt-tekster er korte, alternative tekster til ikke-tektslig innhold, f.eks. bilder. Hvorfor? Tekstene hjelper brukere som ikke ser bilder. Dette kan skyldes at de er blinde eller svaksynte, eller at de har skrudd av bildevisning i nettleseren. Tekstene hjelper også Google til å skjønne innholdet i bilder. Alternativ bildetekst er kriterie 1.1 i Difis kvalitetskriterier på nett 1. Tommelfingerregel Dersom du skulle beskrevet nettsidens innhold til en person over telefon, hva hadde du sagt om bildet? Bruk dette som alt-tekst. Råd 1. Dekorasjon: Ikke skriv alt-tekst dersom bildet kun er til dekorasjon. 2. Lenker: Si hvor lenken går dersom bildet er lenket. Alltid ha alt-tekst klikkbare bilder! 3. Tekst: Dersom et bilde inneholder tekst, bruk samme tekst i alt-teksten. 4. Mening: Beskriv meningen med bildet, ikke hva bildet viser. 5. Grafer/illustrasjoner: Beskriv resultatene i grafen. 6. Mye informasjon: Sett utviklere på jobben! 1

2 Eksempler Dekorasjon 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

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

4 Tekst 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

5 Mening 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 n 5GHz i forklaringen. Feil: Hjemmesentral Aksesspunkt Klient Dekoder n 5GHz Riktig: Trådløs forbindelse mellom hjemmesentral og dekoder via et aksesspunkt og en klient.

6 Grafer/illustrasjoner 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: 2250 kwh des., 1700 nov., 1500 okt., 1000 sept., 500 aug. 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.

7 Mye informasjon Hva med bildefiler med mye innhold? Se på følgende eksempler: 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 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» 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! Vi har et longdesc-attributt for lengre tekster, men dette støttes dessverre av få publiseringsløsninger.

8 Et lignende eksempel er Altibox kanaloversikt: 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!