Digital Design System

Imagery

An image conveying information must be supported by alternate text to provide the same information conveyed in the image.

There are many types of imagery that are possible; here, we’ll outline a few, and give some pointers on how to achieve good accessibility within your content.

Jump to:

Informative Images

“Informative images convey a simple concept or information that can be expressed in a short phrase or sentence. The text alternative should convey the meaning or content that is displayed visually, which typically isn’t a literal description of the image. In some situations a detailed literal description may be needed, but only when the content of the image is all or part of the conveyed information. Whether to treat an image as informative or decorative is a judgment that authors make, based on the reason for including the image on the page.” Source: W3 WAI – Informative Images

What does this mean for content editors? Any image that is conveying information must also have an alt tag with a text-based explanation of what the image is conveying. This way, if an image cannot be seen (either because a user is disabled, or images are not loading due to slow connection speed, missing asset, etc.), the information can still be conveyed.

In the code example below, a hypothetical .jpg has some information conveyed. That information is also then conveyed within the alt attribute of the <img> tag.

Alt text must not exceed 80-125 characters. <img src="statistic.jpg" alt="85 percent of clients are satisfied with this survey">

Decorative Images

Decorative images don’t add information to the content of a page. For example, the information provided by the image might already be given using adjacent text, or the image might be included to make the website more visually attractive.

In these cases, a null (empty) alt text should be provided (alt=””) so that they can be ignored by assistive technologies, such as screen readers. Text values for these types of images would add audible clutter to screen reader output or could distract users if the topic is different from that in adjacent text. Leaving out the alt attribute is also not an option because when it is not provided, some screen readers will announce the file name of the image instead.

Whether to treat an image as decorative or informative is a judgment that only the author can make, based on the reason for including the image on the page. Images may be decorative when they are:

  • Visual styling such as borders, spacers, and corners
  • Supplementary to link text to improve its appearance or increase the clickable area
  • Illustrative of adjacent text but not contributing information (“eye-candy”)
  • Identified and described by surrounding text

Source: W3 WAI – Decorative Images

What does this mean for content editors? Simply, an image that is decorative-only does not need to be read by a screen reader. For example, if your content is about Brexit, and there is an image asset of an aerial shot of a river, that image is not useful to the user who is specifically interested in Brexit. The image conveys no information that pertains to the subject matter. Therefore, this image can contain an empty alt tag.

In the code example below, an aerial image accompanies a newsletter. The image is an aerial view of a city, and the subject of the newsletter is Brexit. The aerial view offers no information that is pertinent to the subject. Therefore, leave the alt attribute blank: <img src="aerial-city.jpg" alt="">

Functional Images

Functional images are used to initiate actions rather than to convey information. They are used in buttons, links, and other interactive elements. The text alternative for the image should convey the action that will be initiated (the purpose of the image), rather than a description of the image. For instance, as shown in examples below, the text alternative should be “print this page” rather than “(image of a) printer”, “search” rather than “magnifying lens” or “Example.com homepage” rather than “Example.com logo”.

Missing or empty alt values create significant problems for screen reader users because functional images are essential to the functionality of the content. Screen readers will typically announce the image file name, the image URL, or the URL for the link destination, which is unlikely to help users understand the action that will be initiated by the image.

Source: W3 WAI – Functional Images

What does this mean for content editors? Usually, you won’t encounter many functional links outside of the core front-end of the website (e.g. “Menu”, “Search.”). Some functional images are also decorative, and should receive an empty alt tag as a result. However, many code snippets and components have small functional elements. If, for instance, you decide to use a button snippet within an article, you will need to properly code the button and the functional icon that supports it, in order to convey proper functionality.

In the example below, an image of a printer is operating as a link, encouraging the user to click the image to print the page. The print graphic that accompanies the link should have alt text that represents the function of clicking that link.

    <a href="javascript:print()">
            <img src="print.png" alt="Print this page">
    </a>

Alt Text How To

If a graphic is laid out in a certain way and contains text, additional context will be needed for the contents of an image to be accessible to non-sighted users.

As a marketer/page builder, you’ll need to provide text-based information that effectively repeats the content within an image. If a non-sighted user looks at a page, they can’t see or read any of the text in an image. In many cases, this means they can’t access any of our content – and this is not permitted.

Alt text must not exceed 80-125 characters.

In the below example, the text is all in the image, because it is a stylized chart that includes data. This is fine, but the screen readers can’t process the text.

For the above image, the following paragraph would be an acceptable description of the image to provide:

“The transforming category’s financial performance is substantially above its peer group at 31%. In other peer groups: All respondents are 19%, Emerging is 12%, Advancing is 17%, Leading is 19%.”

For the above example, the following sentence is not explicit enough and does not provide enough information, therefore is unacceptable:

“Financial performance is substantially above peer group.”

  • Since imagery captions are done in HTML, the caption does not need to be repeated in the description.
  • Alt text should never be more than 80-125 characters maximum.
  • Never use “Image of…” in the alt text. This is extraneous as the alt text is already within an <img>

Implementing for complex images.

Smaller, less complex imagery can use alt information to provide context. Use up to one sentence to describe an image if it needs describing.

For those using Bootstrap/working on wtwco.com, the “sr-only” class is available. It hides text from every visual display of the site, and only screen readers pick it up.

For complex imagery, you must always make sure to provide a connection between the complex image and the description.

wtwco.com Approach

Reference WAI Complex Imagery

Specific approach preferred is below, and relates to Approach 2

<p>
<img
   src="chart.png"
   alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3. Described under the heading Site visitors full text.">
</p>

<h4>Site visitors full text</h4>
[…]
  • Above you can see that the alt text refers to the heading below where the content is described. This helps those useing a screen reader to connect the image with the supporting text.
  • You are welcome to implement other methods listed as approved methods, but below is likely the easiest for content editing.

WCAG References