Alternativtext för bild i länk

Silktide hittar länkar som innehåller en bild men ingen läsbar text av något slag. En sådan länk saknar namn, så personer som inte kan se bilden har ingen möjlighet att veta vart den leder.

<!-- Problem: länken saknar ett tillgängligt namn -->
<a href="/apple">
    <img src="apple.png">
</a>

<!-- Åtgärdat: alternativtexten anger länkens namn -->
<a href="/apple">
    <img src="apple.png" alt="Ett rött äpple">
</a>

Varför detta är viktigt

När en länk endast innehåller en bild blir bildens länkens namn. Utan den läser en upp något i stil med ”länk” eller faller tillbaka på att läsa måladressen eller bildfilens namn – inget av detta talar om för lyssnaren vart länken leder. Navigering som bygger på bildlänkar, till exempel logotyper och ikonmenyer, blir en gissningslek.

Även användare av tangentbord och röststyrning påverkas: en länk utan namn är svår att rikta in sig på med röstkommandon och meningslös i en lista över länkar.

Så åtgärdar du det

Lägg till alternativtext i bilden som beskriver länkens syfte – vart den leder eller vad den gör – i stället för hur bilden ser ut. För en länkad logotyp är ”Hem” eller organisationens namn bättre än ”logotyp”.
Alternativt kan du lägga till synlig text i länken bredvid bilden. Bilden kan då ha en tom alt="".
Åtgärda mallarna i ditt där samma omärkta ikonlänk upprepas på flera sidor.

Så testar Silktide detta

Hitta varje bild som ligger inuti en länk och hoppa över länkar som är dolda för skärmläsare.
Läs all text som länken visar för , inklusive alternativtexten för allt som finns inuti den.
Rapportera bilden när den sammanlagda texten inte innehåller några bokstäver eller siffror, vilket lämnar länken utan ett användbart namn.

Till skillnad från andra kontroller av alternativtext godkänns inte en tom alt="" här: om bilden är länkens enda innehåll gör en markering som dekorativ att länken saknar namn.

Felsökning

Bilden är dekorativ

I en länk utan annan text kan en bild inte behandlas som enbart – något måste ange länkens namn. Antingen ger du bilden alternativtext som beskriver målet, eller så lägger du till synlig text i länken.

Länken är märkt på ett annat sätt

Den här kontrollen läser text och alternativtext i länken. Om länken namnges på annat sätt och du har verifierat att den läses upp korrekt av en skärmläsare kan du resultatet.