An image, they say, is worth a thousand words. Unless you can’t perceive images. This is why the alt attribute for images on the web is so important. I began talking about the importance of alt text decades ago. But images without an alt attribute, or with incorrect alt text are still present on every site we audit.
What the alt attribute does
The alt attribute provides non-visual information about images. This information is available to assistive technologies, such as screen readers.
When a screen reader encounters an image, it looks for the alt attribute. The screen reader then announces the content of the alt attribute to the screen reader user.
Note: You often hear people refer to the alt tag. From a technical perspective, alt is an attribute, not a tag.
Problems caused by incorrect alt attributes
- No alt attribute used
- Screen readers will typically announce “image” when there is no alt attribute present.
- Filename as alt text
- Some content management systems will insert the filename as alt text if the content creator hasn’t specified one. In some cases screen readers may also announce the filename if there is no alt attribute. This may not be a huge issue if the photo is of cute puppies and the filename is cute-puppies.jpg. It is more of a problem if the filename is IMG_9602.jpg.
- Empty alt attribute
- This isn’t a problem if the image is decorative. If the image is informative, the information is not available to screen reader users. I’ll discuss the empty alt a bit more in a bit.
- Images used as the only link destination
- Screen reader users will not know the destination of the link.
- Image of text
- Text won’t be announced by screen readers.
Informative vs decorative images
The nutshell question to ask yourself is “Is this image informative, or is it decorative?”.
You must provide clear and concise alt text if the image imparts information not available in text elsewhere on the page, or if it provides additional information.
If the image is there as eye candy, or to make the page look visually attractive, then you use an empty, or null alt.
A great resource for more information on this is An alt Decision Tree on the W3C’s WAI site. This was also made available as an interactive set of variations by Toufic Sbeiti.
Empty or null alt
Empty or null alt means that there is no content between the apostrophes. Do write alt="". Don’t write alt="null".
Alternatively, you can also write alt, without a value.
Takeaways
The alt attribute must be present on images. If the image is decorative, it’s fine to use an empty alt attribute. If the image is informative, use clear and concise alt text.
If you have questions, comments, or want to add your perspective, please let us know via email or on Twitter @knowbility. And, if you need help with all the other tasks related to accessible design, development, and leadership support, we’re here for you.