Images: accessibility for content authors

  • Author: Access iQ ®
  • Date: 23 Nov 2012
  • Access: Premium

Images play an important role in conveying information on websites, however not all users can see them.

Success Criterion 1.1.1 Non-text content states:

All non-text content that is presented to the user has a text alternative that serves the equivalent purpose, except for the situations listed below. (Level A)

In HTML, the <alt> attribute allows you to provide a text substitute for images or non-text content, in case the image can't be viewed by the user.

For blind or vision impaired users who rely on screen readers to interpret information on a screen, alternative text (alt text) is what will be voiced by the screen reader when the image is the focus.

Pie charts for example, are used to give graphical representations of data. Alt text allows you to provide the text substitute of the information presented in a pie chart so that this information is available to screen reader users.

There are many ways in which images are used and their different purposes will determine how you write your alt text. WCAG 2.0 outlines best practice techniques for providing alt text for different types of images.

  • Meaningful images serve a purpose and can be categorised as simple or complex, depending on whether they need a short or long alt text description, respectively.
  • Decorative images are purely aesthetic and do not serve a purpose or function.

If the image is simple, use short alt text to provide a text substitute. If the image is complex and requires a long text substitute, use the <longdesc> attribute or refer to the location of the alt text elsewhere on the site. If the image is purely decorative, leave the alt text blank.

Note: An image that is decorative still requires the <alt> attribute, even if it has no function. This acknowledges that an image is present but has no function, and instructs the screen reader to skip over it.

Whatever the purpose of the image is, the overall aim of alt text is to convey meaning that is equivalent to the meaning provided by the image.

Writing good alt text

When writing alt text, a good starting point is to determine what type of image you are writing the alt text for. Images can be grouped into three categories:

  • Simple: Meaningful images that can be described with a short alt text.
  • Complex: Meaningful images that require long alt text.
  • Decorative: Images that are purely aesthetic and have no function or require no action.

A meaningful image has a function or serves a purpose.

For example, if you use an image of a house as a link to the homepage of a website and there is no other way to determine its function other than what can be inferred by the image of a house, the image is meaningful. In this case, your alt text should explain that the image of the house is a link to the website's homepage.

Example 1:

Homepage icon.

<img src="http://www.accessiq.org/house.jpg" alt="Go back to the homepage.">

Once you determine the type of image and its function, you will be able to decide what kind of alt text is required for the <alt> attribute.

Note: When a screen reader is focussed on an image, it announces "image" before reading the alt text. To avoid repetition, refrain from using "image of" or "picture of" in the alt text.

Using short alt text for simple images

News reports often include images that convey part of, or add to the story it relates to. If the image is inaccessible, part of the story is lost.

For example, in a feature story about the hardships of drought, an image of a farmer herding sheep along an arid landscape is integral to the message of the story.

Example 2:

<img src="http://www.accessiq.org/farmer.jpg" alt="South Australian farmer John Smith with his sheep.">

While the alt text is not inaccurate, it doesn't convey the meaning of the image, or the content of the article published. An effective alt text describes the image and explains why it's important to the rest of the text content.

Example 3:

<img src="http://www.accessiq.org/farmer.jpg" alt="South Australian farmer John Smith stands on the back of a utility truck, surrounded by sheep. It is dusty and the land looks dry and eroded with little soil or water.">

By providing more detail about what is in the image, you give the user a way to understand the function of the image as well as what the image represents visually.

The key to success is to find the balance between providing enough detail to convey meaning for screen readers while keeping the text succinct enough that the flow of the content is maintained.

Using long alt text for complex images

When short alt text isn't sufficient to provide a text substitute for images that contain complex information, you can provide the text substitute for the image in the space following or adjacent to the image.

For example, graphs often contain complex information that need long descriptions. Write a short alt text overview and direct users to the text substitute of the graph.

Example 4:

Line graph showing the average weekly earnings of males and females in May 2010.

<img src="http://www.accessiq.org/line%20graph%20weekly%20earnings.jpg" alt="Line graph showing the average weekly cash earnings of males and females in May 2010. Details in the following text.">

The line graph shows that in May 2010, the average weekly cash earnings of full time male workers was $1400, while full time female workers in the same month earned an average of $1200.

You can also provide a link to the text version of the image directly below. This link will be available to both sighted users and users that require the assistance of screen readers. In this case, reference the link through a short alt text overview.

Example 5:

<img src="http://www.accessiq.org/line%20graph%20weekly%20earnings.jpg" alt="Line graph showing the average weekly cash earnings of males and females in May 2010. Details can be found in the following link.">

<a href="http://www.linegraphs.com/">Text version of line graph about weekly earnings.</a>

Using blank alt text for decorative images

Some images are purely decorative. Examples of decorative images include borders or background images. If these images don't serve any function to the information you want to convey, use blank alt text.

Example 6:

Arrow icon with blue gradient.

<img src="http://www.accessiq.org/blue%20gradient.jpg" alt="">

The important thing to remember is that all images should be marked with the <alt> attribute, even if they have no function. This signifies to the screen reader that an image is on the page, but that it serves no specific purpose and can be skipped over.

Adding the <longdesc> attribute

You can also provide a text substitute for complex images through the <longdesc> attribute. The <longdesc> attribute is used to direct users to where further information can be found, typically in the form of a URL.

Note: The long description itself should not be included in the source page markup. This gives the user the choice whether or not to use the link to the detailed information.

Example 7:

Line graph showing the average weekly earnings of males and females in May 2010.

<img src="http://www.accessiq.org/graph.jpg" alt="Line graph showing the average weekly cash earnings of males and females in May 2010." longdesc="http://www.accessiq.org/description.htm">

The <longdesc> attribute is not available to all users; the specified link is not visible to sighted users but can be picked up by screen readers.

H45: Using longdesc states:

The objective of this technique is to provide information in a file designated by the <longdesc> attribute when a short text alternative does not adequately convey the function or information provided in the image. The <longdesc> attribute is a URL, the target of which contains a long description of the non-text content.

Some older assistive technologies do not support the <longdesc> attribute. For this reason, many in the web accessibility community are divided about its use and inclusion in HTML 5 — the fifth revision of the HTML markup language, which, as of July 2012 is still under development.

Using text alternatives on a group of images

When the purpose of a group of images can be conveyed in the alt text of a single image, you can use a blank alt text to avoid duplication.

In a star rating system for example, information about the function of this group of images can be conveyed using one alt text. In this case, write the explanatory alt text for one of the images. The function and purpose of this group of images can be represented in the first image and alt text.

Example 8:

Star rating with five stars where the first four stars are yellow.

<img src="http://www.accessiq.org/star%20rating%20pic.jpg" alt="The Blue restaurant has been given a 4 out of 5 star rating for exceptional customer service.">

Using alt text for both meaningful and decorative images

In some cases, an image can be both meaningful and decorative. These can appear as images that are links to various parts of a website or when images are used as links.

If the image is both meaningful and decorative, write alt text that describes the function of that image and which area of the website it will link to.

For example, an image of an envelope is often used as the link to send an email to the website administrator. In this case, alt text that describes the image such as "envelope" does not sufficiently explain the function of the image. A more suitable alt text would be "Send email to admin@website.com".

Example 9:

Envelope icon.

<img src="http://www.accessiq.org/envelope.jpg%3C/code%3E%3Ccode%3E" alt="Send email to admin@website.com">

<a href="http://www.website.com/email">Send email to admin</a>

Benefits of using alt text

Using alt text ensures that no one misses out on vital information conveyed through images on a website. However, there are benefits in using well-written and relevant alt text, including:

  • Search engine optimisation (SEO) — the text used in the <alt> attribute will increase the visibility of the content of your website when someone uses a search engine to look for information on the web.
  • If someone has disabled images in order to keep their bandwidth usage to a minimum, the information contained in an image can still be accessed.

WCAG 2.0 references

Related Techniques for WCAG 2.0