This is an in-progress, unapproved draft. Please send any suggestions, edits, or comments to the publicly-archived list: email@example.com.
[DRAFT] Complex images
Complex images are those that 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, first the short description to identify the image and, where appropriate, indicate the location of the second part, which is a long description of the image. The long description must be 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 is important that the user understands the image construction. This page shows several possible approaches that can be used to provide both short and long descriptions.
Example 1: Image containing substantial information
This bar chart of website visitor statistics has the short description " Bar chart showing monthly and total visitors for the first quarter 2013 for sites 1 to 3" as the alt attribute, identifying the image. The long description details the information, including scales, values, relationships and trends, that are represented visually. For example, the declining values for site 1, consistent values for site 2, and increasing values for site 3 are highlighted through the bar chart representation. This information needs to be made available in the long text description as well.
2013 first quarter example.com website visitors
Approach 1: Providing a link to the long description via longdesc
Here the longdesc attribute contains the URI of the page containing the long description. Where appropriate, the longdesc value could simply contain a hash link to the long description if it is published on the same page as the image.
<img src="../img/chart.png" alt="Bar chart showing monthly and total visitors for the first quarter 2013 for sites 1 to 3" longdesc="2013first_qtr_text.html">
Note: Both Firefox and Chrome browsers are working on implementations that will make the longdesc linked long description location reachable by all users. In older or other browsers it is only available to screen reader users.
Approach 2: 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.
<img src="../img/chart.png" alt="Bar chart showing monthly and total visitors for the first quarter 2013 for sites 1 to 3">
<a href="2013first_qtr_text.html">Example.com Site visitors Jan to March 2013 text description of the bar chart </a>
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.
Approach 3: 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.
<img src="../img/chart.png" alt="Bar chart showing monthly and total visitors for the first quarter 2013 for sites 1 to 3. Described under the heading Site visitors full text.">
<h4>Site visitors full text</h4>
Approach 4: 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.
<img src="../img/chart.png" alt="Bar chart showing monthly and total visitors for the first quarter 2013 for sites 1 to 3, described in full below.">
<p>Site visitors for the first ...</p>
<caption>Example.com Site visitors Jan to March 2013</caption>
Related WCAG2.0 Techniques
The following WCAG 2.0 techniques were used in the examples above:
- G95: Providing short text alternatives that provide a brief description of the non-text content ;
- G92: Providing long description for non-text content that serves the same purpose and presents the same information ;
- H45: Using longdesc;
- G73: Providing a long description in another location with a link to it that is immediately adjacent to the non-text content ;
- G74: Providing a long description in text near the non-text content, with a reference to the location of the long description in the short description .