Images serve many purposes: They can be purely decorative; they can be menu items or buttons; they can illustrate concepts and present data. How well does your web page work if your images are missing? If you are blind and use a screen reader, or if you are a mobile user disabling image download to conserve bandwidth, will you be able to understand and use the website?
Use ALT attributes for accessibility
You can make the visual part of your website more useful to everyone by identifying or describing your images using the ALT attribute. For current recommendations on how to provide useful text for all your images, there is a great tutorial at the W3C Web Accessibility Initiative.
Depending on the image’s purpose, the tutorial provides examples of the most useful way to describe it. For those images that are just decorative, the tutorial suggests that they don’t need any cluttering text. But, no ALT attribute means some screen readers will read the filename instead. To avoid this, you can include an ALT attribute with an empty string — alt=””
Retrofitting old web pages
In the old days, I didn’t think I needed an ALT attribute if an image was just decoration, or it had a caption, or its content was already described in the page text. So now that I’ve learned that these images still need an ALT attribute with an empty string, instead of no ALT attribute at all, how do I retrofit an old site, with lots of pages and many decorative images? How do I find all the IMG tags that don’t have ALT attributes? Searching for something that is not there seems tricky.
Searching using Regular Expressions
The answer is a regular expression, a sequence of characters that define a pattern (as defined in Wikipedia). We can find the text we want by using the known pattern that starts with “<img” and ends with “>”. A regular expression can find strings that don’t include certain text, called “negative lookahead”.
You need an editor that supports regular expressions and searching across multiple files and folders. I’m using Eclipse, an open-source developer’s code editor. Adobe Dreamweaver also supports regular expressions, and most dedicated code editors do too.
Finding IMG elements that don’t have ALT attributes
Use this regular expression to search:
/<img(?!.*alt).*?>/g
What it means
- <img
The string we want to find begins with the exact text “<img” - (?!.*alt)
This section specifies a negative lookahead, meaning don’t match whatever is specified. Here “.*alt” means any characters, followed by “alt”. - .*?
These characters mean that any character repeated any number of times can follow, using a “lazy” match – matching as few times as possible - >
The match ends with the exact character >. If the search finds > without finding the text “alt”, you’ve got a successful search result.
So the result is that you find all the IMG elements that do not contain an ALT attribute. For all the search results, paste in ALT with an empty string and you’ve improved the accessibility of your site. If the task is really big, you would want to write a script to do it for you.
Thanks to RegExR, which provides a nice testbed to figure out the syntax for a complex regular expression. It provides a glossary of characters, a test area, and tooltips explaining each part of your expression.