Complex Images

A complex Image contains substantial information that can’t be conveyed in short sentence or a phrase. Examples of complex images include:

  • Infographics
  • Charts and Graphs
  • Diagrams
  • Maps

Complex images are at high risk of being inaccessible to some users. For example, complex images can be difficult to understand for people with low vision, color blindness, or cognitive disabilities. It is advised to generally avoid the use of complex images when possible. General web usability best practices should be used when designing complex images. Please reach out to Web Services for guidance before posting a complex image.

If using a complex image, alt text alone is not sufficient to provide a description of the image. To solve this problem we break our alt text into two parts. The first part is a description that briefly describes the image and also describes a location of a longer description of the image. The second part is a text version of the detail described in the image. The long description should be made available to all users, not just for screen readers.

There are many ways to provide a detailed description for a complex image. The following are some techniques that may be used.

Option 1 – Provide the detailed description directly below the image.

An all-text description that contains all of the important information provided in the image should be located directly below the image (a caption may precede the description). The alt text of the the image should briefly describe the image and inform the user that the full description can be found following the image.

Example:

<img src=”imageName.gif” alt=”A bar chart showing student majors at USF. See the heading Text Version of Chart for the full description” />
<h2>Text Version of Chart</h2>
<p>Full description of chart</p>

Option 2 – Provide a link to the detailed description directly below the image.

The link should be located directly below (or above) the image (a caption may precede the link). The link will take the user to a page that contains a detailed description of the image.

Example:

<img src=”imageName.gif” alt=”A bar chart showing student majors at USF. See the text version of chart link for the full text description of this chart.” />
<a href=”detailedDescription.html”>Text version of chart</a>

Option 3 – aria-describedby

The following example associates a detailed description with the image. We achieve this by associating the aria-describedby value, in this case "detailedDescription" with the id value of the long description. In the example, we put our long description in a paragraph tag, but it could have been in a div tag or other appropriate HTML element.

Example:

<img src=”imageName.gif” alt=”A bar chart showing student majors at USF” aria-describedby=”detailedDescription” />
<p id=”detailedDescription”>The detailed description</p>

Resources