One of the most common violations we see when we do accessibility audits is images without alt text. This week we did one for a client that had 121 issues on their home page, and a whopping 65% of those were images with missing alt tags.
The General Rule
The general rule with regard to alt tags is that they need to be descriptive when the image contains important information. A good example is this simple pie chart:
An appropriate alt tag for this image might be “59 of 74 tests passed”.
If, on the other hand, the image is purely decorative (like the header image at the top of this page), a descriptive alt tag is not only unnecessary, it actually hinders accessibility, because it adds useless information to the page. These images count for the vast majority of those we find with either no, or superfluous alt text. In these cases, we recommend the use of an empty alt tag like so:
<img src="dog.jpg" alt="">This satisfies the WCAG guidelines, without bombarding the screenreader user with things like “image of a dog” and “company logo”.
In most cases, this is an easy fix. But what if (like the aforementioned client), you have hundreds of decorative images without alt tags? Or you inherited a WordPress site with a bunch of images with the alt text of “Blog Image”?
The Fix
We came up with a simple jQuery script that finds images without alt tags, and adds them for you. If your image already has an existing alt tag, it won’t alter it.
$('body img:not([alt])').attr('alt', '');If you need to replace the alt text on images with specific text like “Blog Image”, add this:
$('body img[alt="Blog Image"]').attr('alt', '');
Note: it is important to use proper alt text for accessibility, and this should not be considered an alternative simply to avoid violations.