One Line of CSS to Catch Missing Alt Text

Missing alt text is one of the most common accessibility issues on the web. I have a fun CSS snippet to help debug your pages and make images that are missing alt text stand out. You can use the :not() CSS pseudo-class selector of [alt] on an img selector. Add a border, say 5px and dashed and a fun color that contrasts with your color palette, I like to use hotpink. The key is to have the border large and unique to stand out.

img:not([alt]) {
  border: 5px dashed hotpink;
}

It’s a simple CSS debugging snippet to add to your CSS during development to ensure you’re always adding alt text to images.

Disclaimer: this snippet only addresses missing alt text, not ineffective alt text. An example of ineffective alt text would be using the image filename, like image.jpg, as the description.