Simon Blackbourn

Highlighting images with missing alt tags

Every image on your website should have an alt tag (pedantically speaking, it's actually an alt attribute, but it's widely known as alt tag).

Here's an example:

<img src="sunset.jpg" alt="Sunset over Dartmoor">

Why are alt tags needed?

Alt tags are a crucial accessibility feature used by screen readers to describe images to visually impaired and blind users. Without alt tags, those people will not know what your images are. They will have a substantially degraded experience of using your website, so may not return.

Missing alt tags will cause your website to fail various accessibility standards, such as WCAG (Web Content Accessibility Guidelines). In many countries, if your website is in certain sectors (e.g. government or public sector), meeting accessibility standards is a legal requirement.

Decorative images?

If an image is purely for decorative purposes, it has no editorial purpose whatsoever, then the alt text is not needed. However, the alt tag must still be present, but you should set it to be empty:

<img src="image.png" alt="">

One line of CSS to the rescue

Adding the following one line of CSS to your website, which uses the :not selector, will highlight all images with missing alt tags, by adding a bright red, dashed border to them:

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

Bear in mind that if you use this on your live website all your visitors will see it!

An image with a dashed red border

WordPress plugin

When adding images to posts and pages in WordPress, it's all to easy to forget to add the alt text, so I've written a WordPress plugin to highlight images with no alt tag. The highlight is only shown to logged in administrators, your regular visitors won't see anything, so you can safely use it on your live website.

Download the WordPress plugin

The plugin is on GitHub at the moment, I'll submit it to the WordPress plugin repository and update this post with the link when it's available from there.

Other tools

My favourite tool for checking the accessibility of a website is Pa11y. It's a command line tool that gives all sorts of useful information about the accessibility of your website, including missing alt tags, text contrast, missing input field labels, and lots more. You pass in your website URL and it outputs a list of warnings:

pa11y https://example.org

Axe does a very similar job, so it's probably a question of personal preference.