Title-attribut på tom alt-text

Silktide hittar bilder som har markerats som dekorativa med tom alternativtext, men som också har ett title-attribut. De två attributen motsäger varandra, och hjälpmedel hanterar konflikten på ett oförutsägbart sätt.

<!-- Problem: alt säger "hoppa över mig", title säger "läs mig" -->
<img src="logo.png" alt="" title="Företagslogotyp">

<!-- Åtgärdat: genuint dekorativ -->
<img src="logo.png" alt="">

<!-- Åtgärdat: genuint meningsfull -->
<img src="logo.png" alt="Företagslogotyp">

Varför detta är viktigt

En tom alt="" deklarerar att en bild är dekorativ, vilket talar om för en skärmläsare att hoppa över den. Ett title-attribut läses däremot fortfarande upp av vissa skärmläsare – så samma bild är tyst för vissa användare och talar för andra. Oavsett vad författaren avsåg blir resultatet fel för någon.

Attributet title är i allmänhet opålitligt: det visas vanligtvis bara som en verktygstipsruta när muspekaren hålls över det, så användare med tangentbord eller touchskärm ser det inte heller.

Så åtgärdar du problemet

1. Om bilden är dekorativ tar du bort attributet title och behåller den tomma alt="".
2. Om bilden är meningsfull flyttar du beskrivningen till alt-texten och tar bort title.
3. Använd inte title som ersättning för alt-text någonstans – det exponeras inte på ett tillförlitligt sätt för någon.

Så testar Silktide detta

1. Hitta varje bild på varje sida.
2. Välj bilder vars alt-attribut finns men är tomt.
3. Rapportera varje sådan bild som också har ett icke-tomt title-attribut.

Läs mer

• Förstå framgångskriterium 1.1.1: Icke-textbaserat innehåll (WCAG 2.2)
• Teknik H67: Använda null-alt-text och inget title-attribut på img-element
• Dekorativa bilder
• Saknad alt-text