Highlight av bilder utan alt

Det är lätt att vara lat som webbutvecklare och inte skriva alt=-attributet på alla bilder vi lägger till. Men det är viktigt att ha med sett utifrån ett tillgänglighetsperspektiv. Ett enkelt sätt att hitta om man saknar några alt= på sin sida är att lägga till följande kod i sin stylesheet.

img:not([alt]) {
    outline: 4px red dashed !important;
}

Med denna kod så får alla bilder som saknar en alt en röd outline. Nedanför kan ni se ett exempel på hur det kan se ut:

Outline på bild utan alt-attributet

Outline på bild utan alt-attributet

När man lagt till en alt på samtliga bilder så kan man givetvis ta bort CSS-regeln igen, för att inte skicka med onödig data till klienten.

#Revision history

  • 2020-12-03: (A, nik) Första versionen.

Document source.