Alt-text

Alt-text är en kort beskrivning i en bilds HTML som förmedlar bildens innehåll eller funktion till skärmläsare och sökmotorer.

Vad är alt-text?

Alt-text (förkortning för alternativ text) är en skriftlig beskrivning som läggs till en bild via HTML-attributet alt. Den berättar för skärmläsare, sökmotorer och användare med långsamma anslutningar vad en bild visar eller gör. Alt-text är ett av de äldsta och mest grundläggande tillgänglighetskraven på webben.^[1]

Varför är alt-text viktigt?

När en skärmläsare hittar en bild utan alt-text läser den upp filnamnet istället. Användaren hör något som "IMG_3847.jpg" eller "banner_v3_final.png" — vilket inte betyder någonting. Enligt WebAIM:s analys från 2024 är saknad alt-text ett av de fem vanligaste tillgänglighetsfelen på webben. Det hittades på 54,5 % av de testade startsidorna.^[3]

Alt-text hjälper också användare som stänger av bilder för att spara data. Sökmotorer använder det för att förstå vad bilder visar, så det påverkar SEO direkt.

För innehållsteam som hanterar stora webbplatser — myndighetsportaler, universitetswebbplatser eller försäkringsinformation — behöver varje bild korrekt alt-text. På en webbplats med tusentals sidor kan en enda CMS-mall med saknat alt-attribut skapa hundratals WCAG-brister på en gång.

Hur skriver man bra alt-text?

Rätt metod beror på bildtypen:

Informativa bilder — Beskriv kortfattat vad bilden visar. Ett foto av personal som granskar en instrumentpanel kan ha texten: "Två analytiker granskar webbtrafikdata på en bildskärm."
Funktionella bilder — Om en bild är en länk eller knapp, beskriv åtgärden, inte bilden. En förstoringsglas-ikon bör säga "Sök", inte "förstoringsglas."
Dekorativa bilder — Bilder som inte tillför information ska ha ett tomt alt-attribut (alt=""). Det säger åt skärmläsare att hoppa över dem helt.^[2]
Komplexa bilder — Diagram, grafer och infografik behöver en kort alt-text-sammanfattning plus en längre beskrivning intill eller på en länkad sida.
Text i bilder — Om en bild innehåller text måste den texten stå i alt-attributet ord för ord.

Håll alt-text under 125 tecken när det går. Börja inte med "Bild av" eller "Foto av" — skärmläsare meddelar redan att det är en bild.

Vilka är de vanligaste alt-text-misstagen?

Dessa mönster dyker ofta upp i tillgänglighetsrevisioner:

Inget alt-attribut alls — Det vanligaste felet. Bryter mot WCAG 1.1.1 på nivå A.
Filnamn som alt-text — Uppstår när CMS:et automatiskt fyller alt-fältet med filsökvägen.
Generisk text — Värden som "bild" eller "foto" tillför ingenting.
Upprepar bildtexten — Om samma text står i bildtexten och alt-attributet hör skärmläsaranvändare den dubbelt.
Alltför långa beskrivningar — En 200 ord lång alt-text på ett diagram är jobbig att lyssna på. Använd en strukturerad lång beskrivning istället.

Hur testas alt-text i en revision?

Alt-text är ett av de första automatiserade verktyg kontrollerar. Lighthouse, axe och WAVE kan upptäcka saknade alt-attribut eller alt-text som ser ut som ett filnamn. Men inget verktyg kan bedöma om texten är korrekt eller användbar — det kräver mänsklig granskning.^[3]

IT-team kan lägga till automatiska alt-text-kontroller i sin CI/CD-pipeline för att fånga uppenbara fel tidigt. Innehållsteam bör ha tydliga riktlinjer för skribenter och redaktörer. Juridiska team bör veta att saknad alt-text är en nivå A-brist — det mest grundläggande WCAG-kravet — vilket innebär högst efterlevnadsrisk.

Organisationer som omfattas av tillgänglighetslagstiftning i EU, Storbritannien eller USA bör behandla alt-text som ett grundkrav, inte en valfri förbättring. WCAG-standarden listar det som en nivå A-regel — den mest grundläggande nivån.

Så hjälper Askem

På stora webbplatser — myndighetsportaler, universitetswebbplatser, försäkringsinformation — är det inte realistiskt att kontrollera varje bild för hand. Automatiserade kvalitetssäkringsverktyg skannar sidor och flaggar bilder som saknar alt-attribut eller har ett alt-värde som ser ut som ett filnamn. Verktyg som Askem kör kontinuerliga skanningar så att saknad alt-text fångas när nytt innehåll publiceras, innan det hinner växa till hundratals WCAG nivå A-brister. Det ger innehållsteam en tydlig lista med sidor att åtgärda, rangordnade efter prioritet.

Källor

W3C — WCAG 2.2 Success Criterion 1.1.1 Non-text Content: https://www.w3.org/TR/WCAG22/#non-text-content
W3C WAI — An alt Decision Tree: https://www.w3.org/WAI/tutorials/images/decision-tree/
W3C WAI — Images Tutorial: https://www.w3.org/WAI/tutorials/images/