Hack 67. Highlight Images Without Alternate Text

Quickly see which of your images are missing the required alt attribute.

If you're a web developer, you should already know that web accessibility is important. One of the primary mechanisms for enabling blind and disabled users to view your pages is to provide alternate text for every image. This is so important that the alt attribute is actually a required attribute of every <img> element. Even spacer images need an explicit alt="" attribute to tell text-only browsers and screen readers to skip over the image when they display the page or read it aloud.

Validating your page with the W3C's HTML validator (http://validator.w3.org) will tell you if an <img> element is missing the required alt attribute, but it will also tell you every other single thing you did wrong. If you aren't coding exactly to the HTML specification, the really important errors (such as missing alt attributes) will get lost in a sea of arcane rules and trivial mistakes.

8.2.1. The Code

This user script will run on all pages by default, but you should probably modify the @include line to include just the pages you're currently developing. The bulk of the script logic is contained in the XPath query, "//img[not(@alt)]", which finds all <img> elements that do not include any alt attribute. It will not find images that contain a blank alt attribute, which is perfectly legitimate for spacer images used solely for page layout. It will also not find images whose alternate text is useless to blind users, such as alt="filename.gif" or alt="include alternate text here".

Save the following user script as highlightnoalt.user.js:

 // ==UserScript== // @name Highlight No Alt // @namespace http://diveintomark.org/projects/greasemonkey/ // @description highlight images without alternate text // @include * // ==/UserScript== var snapBadImages = document.evaluate("//img[not(@alt)]", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); for (var i = snapBadImages.snapshotLength - 1; i >= 0; i--) { var elmBadImage = snapBadImages.snapshotItem(i); elmBadImage.style.MozOutline = "2px solid red"; elmBadImage.title = 'Missing ALT attribute! src="/books/4/281/1/html/2/' + elmBadImage.src + '"'; } 

8.2.2. Running the Hack

After installing the user script (Tools Install This User Script), go to http://www.amazon.com. You will see a number of images highlighted with a thick red border, as shown in Figure 8-1.

Figure 8-1. Inaccessible images highlighted on Amazon.com

This immediately highlights several accessibility problems on Amazon's home page. In the upper-left corner, they are cross-selling one of their new partner sites for buying gourmet food online. In the upper-right corner, they have an image link to a list of most wished-for items. Each of these images is missing the required alt attribute. In the absence of an alt attribute, screen readers will read the filename from the src attribute instead, which, as you can see, is completely meaningless.

8.2.3. Hacking the Hack

There are many different avenues to explore in highlighting broken images. You could expand the XPath query to find images with a blank alt attribute. These are legitimate for spacer images, but they should never occur on images that convey information (such as the "Shop in Gourmet Food" image in Figure 8-1):

 var snapBadImages = document.evaluate("//img[not(@alt) or @alt='']", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); 

You could also use a similar technique to find images that are missing other attributes, such as width and height. width and height attributes are not strictly required, but it helps browsers lay out the page more quickly if they know in advance how large an image will be:

 var snapBadImages = document.evaluate("//img[not(@width) or not(@height)]", document, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null); 

You should modify the rest of the script accordingly for instance, to change the tool tip to indicate the problem:

 elmBadImage.title = 'Missing width or height! src="/books/4/281/1/html/2/' + elmBadImage.src + '"';