Using ‘alt text’ on images and icons
One of the common mistakes that web content creators and developers make when trying to make their sites accessible is related to “alt text.” We are told somewhere in the web development classes, boot camps, and tutorials that “alt text” is how you make an image accessible. This is not entirely true.
“Alt text” is the text you add to an “alt” attribute on an image. If you have ever seen a broken image on a site that shows a description of the image, it is the alt text that provides that description. In HTML, it looks like this:
<img src="example.jpg" alt="image description" />
A little clarification is overdue. First, if you are using an image via an img tag (as opposed to as a background image) then you need an “alt” attribute. This does not necessarily mean that you need “alt text.” The “alt text” is the literal description that you put into your “alt” attribute. So when do you need one?
When Text Descriptions on Your Image are Essential
Text descriptions are absolutely essential in specific cases. Here are the circumstances in which alt text is not only necessary but crucial for your site’s accessibility.
- The image is serving as an interactive element such as a link or button – screen readers will use the alt text to describe the link or button.
- The image conveys information that is not otherwise available in a text form such as in an infographic.
- The image includes text – please note – for accessibility purposes you should avoid using text in images whenever possible. However, in some cases such as for logos, text in an image is sometimes necessary. That text should be conveyed via the alt tag.
Also note, that if the same text is available near the image such as in a long text description or caption below the image, then the alt text may not be necessary. The w3c has a nice decision tree for helping you determine when a text description is needed:
When Not to Use Alternative Text
Imagine that you are a non-sighted user perusing the web site of a business that you are interested in and you here this: “Summer rates available for a limited time. Large yellow sunflower.”
That second sentence is the alternative text for the lovely sunflower image that the business uses across their site to accentuate their brand. The question for the business owner is: do you really need to tell your non-sighted users about the yellow sunflower – everywhere that it occurs? More importantly, do you think that is what they want to know about?
For accessibility purposes, you should have an alt attribute on your images. However, in many cases you can use a null attribute.
<img src="example.jpg" alt="" />
Notice the alt=”” in the code above. This is an empty or null alt attribute. Leaving the alt attribute empty tells screen readers that the image should be ignored.
Images that are only decorative in nature should get an empty alt attribute so that screen readers will know to ignore the image. You can still convey images that are intended to convey an emotional appeal by describing the image. Keep in mind that text descriptions of an image may have a bit of a different feel than the image itself.
Remember Cognitive Load
Before you fill your site with atmospheric images with descriptions like “Smiling happy couple,” and “Older couple, happily walking through a park,” think about what you really want to convey to your users. Too much information can negatively impact your intended message.
For screen reader users, cognitive overload from too much repeated information, or unneeded information is a frequent complaint. So make sure that that atmospheric image conveys useful information to your users before you add a text description to the alt attribute. Your users are generally on your site for a purpose, and unless you are a stock image site, they probably don’t want to know exactly how happy the images of the people you add to your product pages are. Instead, focus on the actual product, information, or message that you are hoping to convey.