Alt-text saknas

Silktide hittar bilder på dina sidor som helt saknar alternativtext. Alternativtext är den skriftliga beskrivning som läses upp i stället för en bild, så bilder utan alternativtext är meningslösa för personer som inte kan se dem.

<!-- Problem: inget alt-attribut -->
<img src="apple.png">

<!-- Åtgärdat: beskrivande alt-text -->
<img src="apple.png" alt="Ett rött äpple">

<!-- Också giltigt: uttryckligen dekorativ -->
<img src="decorative-swirl.png" alt="">

Varför detta är viktigt

En har inget att meddela för en bild utan – som bäst läser den upp filnamnet, vilket sällan är till hjälp och ofta är förvirrande. Personer som är blinda eller har nedsatt syn går miste om det som bilden förmedlar, och om bilden är ett diagram, en knapp eller en länk kan de kanske inte använda sidan alls.

Alt-text visas också när bilder inte kan läsas in och hjälper sökmotorer att förstå dina bilder, så att åtgärda detta gynnar alla besökare.

Så här åtgärdar du det

Lägg till alternativtext för varje bild i ditt – de flesta har ett fält för detta när du infogar en bild. I kod använder du alt-attributet enligt exemplet ovan.
Beskriv bildens information eller syfte, inte dess utseende. För en bild som fungerar som en länk eller knapp ska du beskriva vart den leder eller vad den gör.
Om bilden är rent ska du ange ett tomt alt="", så att skärmläsare hoppar över den. Hitta inte på utfyllnadstext – att höra ”dekorativ virvelgrafik” är sämre än att inte höra något alls.

WebAIM publicerar en utförlig guide till att skriva alternativtext.

Så här testar Silktide detta

Hitta alla bilder på varje sida.
Hoppa över bilder som inte behöver alternativtext: bilder utan källa, bilder som är 1 pixel eller mindre (vanligen spårningspixlar) och bilder som är dolda för skärmläsare.
Hoppa över bilder som markerats som dekorativa med attributet role="presentation", eftersom de avsiktligt döljs för .
Rapportera varje återstående bild som helt saknar alt-attribut.

En bild med ett tomt alt="" klarar denna kontroll, men omfattas av Dekorativa bilder, där du ombeds bekräfta att den verkligen är dekorativ. Alt-text som finns men inte är användbar omfattas av Otillräcklig alt-text.

Felsökning

Bilden är dekorativ, så varför flaggas den?

En bild behandlas bara som dekorativ när det anges i koden, genom ett tomt alt="" eller role="presentation". En bild som helt saknar alt-attribut är tvetydig – hjälpmedel kan inte skilja mellan ”dekorativ” och ”glömd” – och klarar därför inte denna kontroll. Lägg till det tomma attributet för att tydliggöra avsikten.

Bilden kommer från en tredjepartstjänst

Bilder som genereras av inbäddade tjänster, till exempel kartor, kanske inte kan redigeras av dig. I webbplatsens inställningar kan du undanta innehåll från tredje part från denna kontroll, eller så kan du enskilda resultat som du inte kan ändra.