"Vilket filnamn vill du att en skärmläsare ska läsa högt i örat 40 gånger om dagen?" Det är en lite absurd fråga, men det är precis vad som händer när en meningsfull bild lämnas med alt="image1.jpg" eller, ännu värre, ingen alt-text alls. Den här artikeln är en praktisk guide till att skriva alternativ text som faktiskt hjälper - inte bara närvarande utan bra .
Kort sagt – vad den här guiden täcker
Varför dålig alt-text är nästan lika dålig som saknad alt-text
Under WCAG 1.1.1 måste allt icke-textinnehåll ha ett textalternativ – men det formella kravet är bara halva historien. "image1.jpg", "image" eller "logo" uppfyller tekniskt kravet (det finns ett alt-attribut), men de förmedlar ingen riktig information. En skärmläsare som hör en sträng med "bild... bild... image23.png" är inte mindre frustrerad än en seende användare som tittar på en serie tomma ramar.
Hur man skriver bra alternativ text
Den vägledande regeln: beskriv bildens budskap i sammanhanget där den visas, inte en bokstavlig beskrivning av vad du ser. Ett foto av människor runt ett bord i ett teammöte, som åtföljer en artikel om samarbete, kan ges "Team som arbetar tillsammans runt ett bord" - inte "Foto av människor." För ett diagram eller diagram, beskriv takeawayen som diagrammet presenterar: "Stapeldiagram som visar en försäljningsökning på 40 % under tredje kvartalet" är betydligt bättre än "Stapeldiagram".
- Kort och målmedveten — vanligtvis räcker det med 1–2 meningar; det finns ingen anledning att beskriva varje visuell detalj.
- Hoppa över "bild av" eller "bild av" — skärmläsaren meddelar redan att det är en bild, så det finns ingen anledning att upprepa den.
- Tänk på den omgivande texten — samma bild kan få olika alt-text i olika sammanhang.
När ska alt text vara tom avsiktligt
Inte varje bild behöver en beskrivning. Rent dekorativa bilder — grafiska skiljelinjer, bakgrundsillustrationer, ikoner som bara upprepar närliggande text — taggas bäst medalt=""(tom alt-text, saknas inte) så skärmläsaren hoppar över dem helt. Skillnaden mellan "saknad" och "avsiktligt tom" är avgörande: saknas låter som ett fel eller läser upp filnamnet; avsiktligt tom hoppar helt enkelt över det tyst.
💡 Praktiskt tips
Ett snabbt test: om du raderade bilden från sidan helt, skulle en användare som inte kan se den missa något? Om inte - det är förmodligen dekorativt och lämpar sig för en tom alt.
Vad man ska göra med komplexa diagram och diagram
För ett komplext datadiagram, en illustrerad jämförelsetabell eller en infografik med flera lager av information räcker det inte med kort alt-text – det finns för mycket information att förmedla. Lösningen: kort alt-text som beskriver det allmänna ämnet, bredvid det (i den vanliga texten som omger bilden, inte bara i alt-attributet) en mer detaljerad beskrivning av den viktiga informationen, eller en motsvarande datatabell som en skärmläsare kan navigera i.
Osäker på vilken alternativ text som saknas eller är problematisk på din webbplats?
Vårt verktyg hittar bilder utan alt-text över alla dokument på din webbplats och flaggar dem efter prioritet.
Gör dina dokument tillgängliga gratis ←