Sådan tilføjes billedtekst (alt-tekst)
Hvad er en alt-tekst?
Alt-tekst (alt-attribut) er et <img> tilføjes til et tag og beskriver billedets indhold med ord: <img src="..." alt="...">. Når billedet ikke kan indlæses (langsom forbindelse, forkert filsti), vises den i stedet i browseren, den læses højt af skærmlæsere til synshandicappede brugere, og den sikrer, at søgemaskinerne forstår, hvad billedet forestiller, fordi Google ikke »ser« billedet på pixelniveau, men hovedsageligt stoler på den omgivende tekst og alt-attributten.
Alt-teksten tjener et helt andet formål end billedets filnavn (f.eks. IMG_2031.jpg): Filnavnet er til serveren/filsystemet, mens alt-teksten er til at formidle betydning. De to må ikke forveksles.
Alt-teksten er heller ikke det samme som en billedtekst (caption), der vises under billedet: En billedtekst er tekst, der er synlig for alle på siden, mens alt-teksten under normale omstændigheder ikke er synlig og kun træder i kraft, når billedet ikke kan indlæses, eller når det tilgås via en skærmlæser. Denne forskel forveksles ofte.
Selvom det i nogle udviklingsmiljøer er muligt at lade alt-attributten stå tom og stadig bestå HTML-valideringen, betyder denne tekniske gyldighed ikke, at alt-teksten rent faktisk er meningsfuld; valideringsværktøjet kontrollerer kun, om attributten er til stede, ikke kvaliteten af indholdet.
Hvorfor er det vigtigt?
Alt-teksten er afgørende både for tilgængelighed og billed-SEO. Synshandicappede brugere får oplysninger om billedets indhold via alt-teksten, når de navigerer på siden med skærmlæserprogrammer; hvis denne tekst mangler, læser skærmlæserprogrammet som regel kun »billede« eller filnavnet op, hvilket medfører tab af information. I nogle lande kan tilgængelighed også være et lovkrav.
Da søgemaskiner ikke direkte kan »se« billedernes indhold, rangordner de siden i billedsøgeresultaterne (Google Billeder) på baggrund af alt-teksten. På e-handelswebsteder kan tilføjelse af korrekt alt-tekst til produktbilleder øge den ekstra trafik, der kommer via Google Billeder. Manglende alt-tekst påvirker både brugeroplevelsen og trafikken fra billedsøgninger negativt.
Når et billede indlæses langsomt på en langsom forbindelse eller slet ikke kan indlæses, er alt-teksten den eneste informationskilde, der giver brugeren en forståelse af, hvad der kan forventes på det pågældende sted; dette gør alt-teksten vigtig ikke kun for SEO, men også for den generelle tilgængelighed.
Hvordan løses det?
- Skriv en kort, beskrivende alt-tekst til hvert meningsfuldt billede.
- Brug kun i billeder, der udelukkende har et dekorativt formål (f.eks. baggrundspynt)
alt="", så skærmlæseren springer billedet over; dette er ikke det samme som slet ikke at tilføje alt-attributten. - Brug kun nøgleordet, hvis det virkelig beskriver billedet, og brug det på en naturlig måde.
- Hold alt-teksten kort og præcis; undgå unødvendigt lange sætninger – som regel er et par ord nok.
- Angiv produktnavnet og vigtige egenskaber (f.eks. farve, model, vinkel) i produktbilleder.
- Hvis du foretager masseimport i dit indholdsstyringssystem, skal du så vidt muligt udfylde alt-teksten manuelt eller i det mindste bruge en meningsfuld skabelon baseret på produktnavnet i stedet for at lade den udfyldes automatisk.
- Ved komplekse billeder, såsom infografikker eller tabeller, bør du overveje at præsentere de detaljer, der ikke kan rummes i billedteksten, som almindelig tekst lige under billedet.
Eksempel
<img src="roede-sportssko.jpg" alt="Røde herresneakers, set fra siden">Dårligt eksempel: <img src="IMG_2031.jpg" alt="billede"> — hverken filnavnet eller alt-teksten giver nogen information om billedets indhold. Et andet dårligt eksempel: alt="sko sko sportssko billige sko sko på tilbud køb sko" — dette har til formål at fylde med søgeord i stedet for at beskrive et enkelt billede og skaber en meningsløs og kedelig oplevelse for brugere af skærmlæsere.
Hyppige fejl
- At lade alt-attributten stå helt tom (ved billeder, der ikke er dekorative).
- At bruge meningsløse filnavne som alt-tekst, f.eks. "billede1.jpg" eller "IMG_2023".
- At fylde alt-teksten med mange nøgleord i træk (f.eks. "sko, sportssko, billige sko, sko på tilbud").
- At gentage den samme generelle alt-tekst på alle billeder.
- Seoraporu.co-rapporten viser hver eneste manglende alt-tekst enkeltvis; på store hjemmesider er dette typisk et problem, der skal løses samlet i produkt-/billedadministrationsskabelonen.