Greasemonkey Hacks

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.

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 ...