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 ...
Get Greasemonkey Hacks now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.