Posted on 5/16/2018 in Accessibility


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:

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.


Not sure if the images on your site are accessible?

Contact us today for an accessibility audit to find out

Related Articles

Demystifying SPF, DKIM and DMARC: Strengthening Email Security

Demystifying SPF, DKIM and DMARC: Strengthening Email Security

With Slack and other instant messaging services handling more and more of our online communication, email can sometimes feel like a newspaper being [...]

Elevating Your Brand: The Transformative Power of Website Design

Elevating Your Brand: The Transformative Power of Website Design

In the digital age, your website is often the first point of contact between your brand and potential customers. It's not just a platform to showcase [...]

Navigating the Digital Landscape: Website Design Trends of 2024

Navigating the Digital Landscape: Website Design Trends of 2024

In the ever-evolving realm of digital innovation, website design trends serve as the compass guiding businesses and creators toward impactful online [...]