Complex Images

Complex images contain substantial information – more than can be conveyed in a short phrase or sentence. These are typically:

  • graphs and charts, including flow charts and organizational charts;
  • diagrams and illustrations where the page text relies on the user being able to understand the image;
  • maps showing locations or other information such as weather systems.

In these situations a two-part text alternative is required. The first part is the short description to identify the image and, where appropriate, indicate the location of the long description. The second part is the long description – a textual representation of the essential information conveyed by the image.

In certain situations the composition of the image may also be needed as part of the long description, but only where it’s important that the user understand the image construction. This page shows several possible approaches that can be used to provide both short and long descriptions.

Also it’s good practice to refer to more complex images from the accompanying text to describe the overall data, for example: “The following graph shows that visitors were lost in the first quarter, but the numbers recovered in the second quarter”.

Image containing substantial information

This bar chart of website visitor statistics has a short description of “Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3” provided through the alt attribute of the image. The long description provides detailed information, including scales, values, relationships and trends that are represented visually. For example, since the declining values for site 1, consistent values for site 2, and increasing values for site 3 are highlighted through the bar chart, this information must also be included in the long text description.

Example:

Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3

Here the longdesc attribute contains the URI of a page containing the long description.

Code snippet: 
<img
	src="chart.png"
	alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3"
	longdesc="2014-first-qtr.html">

If the long description is published within an HTML element on the same page as the image, the longdesc value can simply contain a fragment identifier (“hash link”) to the element containing the long description. This fragment identifier consists of an # and the value of the id attribute of the longdescription element.

Code snippet: 
<img
	src="chart.png"
	alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3"
	longdesc="#chart-longdesc">
[…]
<div id="chart-longdesc">
	[…]
</div>

Note: Both Firefox and Chrome browsers are working on implementations that will make the longdesc linked long description location reachable by all users. Currently, and in other browsers, it’s only available to screen reader users.

A text link to the long description adjacent to the image

This approach provides a text link next to the image. The link text makes both the destination and the association with the image clear.

Code snippet: 
<p>
	<img
		src="chart.png"
		alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3">
	<br>
	<a href="2014-first-qtr.html">Example.com Site visitors Jan to March 2014 text description of the bar chart</a>
</p>

Note: This approach is well supported in all browsers and ensures that everyone has access to the data as well as the image, no matter what browser or assistive technologies they may use.

Describing the location of the long description in the alt attribute

If the long description is on the same page as the image and its location can be accurately pinpointed by being described, the alt attribute can include location information.

Code snippet: 
<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>
[…]

Structurally associating the image and its adjacent long description (HTML5)

The HTML5 <figure> element can be used to enclose both the image and its long description. The long description (presented as headings, text, and a table) is explicitly associated to the image by using role="group" on the containing <figure> element.

Code snippet: 
<figure role="group">
	<img src="chart.png"
		alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3, described in detail below.">
	<h2>Trends</h2>
	<p>Site visitors for the first  ...</p>
	<h2>Statistics</h2>
	<table>
		<caption>Example.com Site visitors Jan to March 2014</caption>
		<tr>…</tr>
	</table>
</figure>

Structurally associating image and long description with aria-described-by

The WAI-ARIA aria-described-by attribute can be used to link the description to the image. The value of the attribute is the id of the element with the description.

Code snippet: 
<img src="chart.png"
	aria-described-by="image-description"
	alt="Bar chart showing monthly and total visitors for the first quarter 2014 for sites 1 to 3.">

<div id="image-description">
	<p><strong>Trends:</strong> Site visitors for the first  ...</p>
	<p><strong>Statistics:</strong>
	<table>
		<caption>Example.com Site visitors Jan to March 2014</caption>
		<tr>…</tr>
	</table>
</div>

Techniques: