Wakefly BlogWhy You Shouldn't Overlook the Use of Alternate Text

Images play a key role in websites. They enhance design, help convey meaning, and assist in site functionality. However, from time to time, we run into issues with images, normally caused by an incorrect image URL or some type of network issue. When this happens (and in a perfect world) text is displayed on the screen in place of the missing image. This is text is called alternate text.

Alternate Text

Text used to define or describe an image is called alternate text, and it is one of the most difficult to properly implement. It also serves a valuable purpose to:

• a screen reader user with a vision disability (color blindness, low-vision, complete blindness)
• a person who has disabled loading of images to save data
• a person on a slow network, causing image loading issues
• search engines

Usage

Some general alternate text usage rules are:

• Be as accurate as possible in describing image content and/or image functionality (i.e. - purpose of a linked image)
• Typically, a few words or a short phrase will do.
• Do not use "Image of…" or "Graphic of…" to describe the image
• Also, do not use “image1.jpg”, “5425647.jpg”, or “Photo taken by...”

To use alternate text, we simply provide an `alt` attribute to the <img> element and provide a text description of the image, for example:

<img src="/path/to/polar-bear.jpg" alt="Polar bear resting with cubs at her side" />

Is the alternate text attribute required?

Yes. The alternate text attribute itself is required with every <img> element. However, the alternate text value is NOT always required.

• Valid: <img src=”/path/to/image” alt=”image description” />
  • Alternate text present, alternate text value present
• Valid: <img src=”/path/to/image” alt=”” />
  • Alternate text present, alternate text value not present (NOTE: empty ‘alt’ attribute value is used in cases where an image is decorative, not informative. Since it doesn’t add any contextual value to the page, it can be left blank. Screen reader users will skip over an image with an empty ‘alt’ attribute value)
• Invalid: <img src=”/path/to/image” />
  • Missing alternate text attribute, making it invalid. Image will be skipped over by screen reader users

Correctly Implementing Alternate Text

As stated earlier, alternate text can be difficult to properly implement. Context of the image is important. The goal is to be as accurate as possible when describing an image, but what does “accurate” really mean? A good question to ask yourself is, would your website convey the same overall meaning, based on its alternate text replacement, if its images were not able to be displayed?

Images come in many variations and types. Think about some of the scenarios below. How might you describe these?

• Image of a mother and child in the park
• Bar or pie chart
• Google map of London
• Infographic
• Image linking to a Landing page
• A decorative image

Alternate Text Decision Tree

Because it isn’t always clear what alternate text value should be used, or not be used, we thankfully have some resources that can assist in determining correct usage. Below are a couple of those links:

• An alt Decision Tree
• Infographic: Making Images Accessible

Conclusion

The importance of alternate text cannot be overlooked. Accessibility of the web would greatly increase if alternative text were provided and implemented correctly. By following the general usage guidelines presented here, we can all make web content more accessible, not only to those with a disability or those experiencing network issues, but to everyone.