Fixing image alt tag violations

One of the most common violations we see when we do accessibility audits is images without alt tags. This week we did one for a client that had 121 issues on their home page, and a whopping 65% of those were images 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:

59 of 74 tests passed

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. In these cases, we recommend the use of an empty alt tag like so:

<img src=”dog.jpg” alt=””>

This satisfies the WCAG 2.0 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?

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.

// AXXS image alt fixer
$('body img').each(function() {
    if ( ! $(this).attr('alt'))
        $(this).attr('alt', '');