Accessible images: complex image guidelines

 

 

Many charts, graphs, infographics and other complex images may at first seem too complex to describe in text. However, take a moment to look at the image. Try to see beyond the visuals to detect the structure of the information beneath. Often, you'll begin to see the architecture, the skeleton, of the information beneath the colorful graphics.  And it will suggest how to format the long description--perhaps as a list, an outline, a table, or one or more paragraphs.

 

For everyone

Alternative descriptions of complex images

Like other images, complex images require equivalent text alternatives that describe the content, function and/or purpose of the image. These text alternatives are critical for people using screen readers and others who aren't able to access your images because of vision or cognitive impairments. People with slow Internet connections or old technology also benfit from text alternatives.

The process of adding alternative text for complex images is more involved than for simpler images. In most cases, alternative text for complex images consists of three parts:

  1. ALT attribute (sometimes called ALT tag): a short description that summarizes and identifies the complex image, graph or chart
  2. Location of the long description
  3. Long description: detailed description of the image in text or table form

ALT attribute

Like other images, ALT attributes for complex images summarize the purpose or importance of the image. Data visualization designer Mary Cesal suggests a simple formula for writing ALT text for graphs, charts, and other complex images--

alt='Chart type of type of data where reason for including chart'

And she gives an example:

A line graph of the number of bananas sold per day in the last year where the winter months have more banana sales.

Location of the long description

Once you've summarized the complex image in the ALT text, next add the location of the long description. You can direct people to the long description by (a) providing a link to it or (b) describing where it's located if it's on the same page, as illustrated in the following.

Link to the long description

Often the easiest way to direct users to the long description is to supply a text link to it. Close to the image (often just below it), add a link to the long description (the long description can be elsewhere on the same page or on another page). For example, the link directly below this bar graph takes the user to a data table describing the chart.

Bar graph of membership sales for 2019-2021 showing 2021 sales returning to pre-pandemic levels.
Text version

Describe the location in the ALT text

Alternatively, you can add the long description elsewhere on the same page (often at or near the bottom), then identify its location in the ALT text. For the above bar chart, our alternative text might be:

Bar graph of membership sales for 2019-2021 showing 2021 sales returning to pre-pandemic levels. See details below under the Resurging sales 2021 heading.

Long description  

Complex images like infographics, graphs and charts usually require more description than can be provided in the image's ALT attribute. Therefore, complex images are almost always given a separate long description. Depending on the type of image, long descriptions can be text-based or a data table.

Text-based long description

WebAIM's Web Accessibility for Designers infographic is a good example of a complex image with a long description in list form. Notice WebAIM didn't describe any visual aspects of the image, not even the icons, considering them unnecessary to an understanding of the main points of the infographic.

Portion of the Web Accessibility for Designers infographic with text description below.

They placed the long description for this image directly below the image, and the image's ALT text points to that location:
alt="Web Accessibility for Designers infographic with text description below."

The text description, or long description, is in list format. Here is a portion of the long description, taken from the WebAIM site:

Text Version

Plan Heading Structure Early

Ensure all content and design fits into a logical heading structure.

Ensure Logical Reading Order

The reading order for screen reader users should align with the visual order.

Provide Good Contrast

Be especially careful with shades of orange, yellow, and light gray. Check your contrast levels with our color contrast checker.

Use True Text Instead of Images of Text

True text enlarges better, loads faster, and is easier to translate and customize.

Use Adequate Font Size

Small text is difficult for all users to see. Ensure text is optimally readable.

Data table long description

Often, the content of charts, graphs and infographics lends itself better to a data table long description. For example, on the What is accessibility? page on this site, a complex illustration from Microsoft is linked to its long description with a "View text version" link under the image:

View Text Version 

The link takes the viewer to a long description in data table form:

  Permanent Temporary Situational
Touch One arm Arm injury New parent (holding baby)
See Blind Cataract Sunlight glare
Hear Deaf Ear infection Bartender (loud music)
Speak Non-verbal Laryngitis Heavy accent

 

Don't use color alone to convey information on charts and graphs

Many people have difficulty distinguishing certain colors or colors with low contrast. Users with low vision, color blindness, monochrome screens, screen rendering problems, light interference, and other issues rely on secondary, non-color cues.

This pie chart is inaccessible for several reasons. First, because the colors have so little contrast, the segments of the chart will be indistinguishable for many people with color blindness and vision impairments. In the grayscale version directly below, you can see how the cream-filled and plain glazed segments are practically identical, as are the jelly-filled and no donuts segments.

12

Second, legend keys are much less effective than directly labeling the parts of a chart or graph. In this case, because the colors are so similar, many people won't be able to associate the labels with sections of the chart. Most will simply have to guess what information they were supposed to receive from this pie chart.

Direct labels

Adding text labels directly to the segments is imperative on charts and graphs. It makes it easier for the user to visualize the data and the relationships between data. However, for this chart, even labels don't help enough. The color contrast ratios are simply too small.

3

 High-contrast ratio colors

One way to increase the distinction between colors on a chart is to use colors with higher contrast ratios. As you can see in the chart in grayscale, below, the individual segments are much more distinctive.

67

Using colors with a higher color contrast ratio is a vast improvement and could be relied on in most cases. However, there are many types of color blindness and vision disorders. If you need to guarantee that everyone will be able to understand the graph or chart equally, consider using patterns and/or shapes.

Patterns and shapes

One of the best ways to supplement colors is with patterns and shapes. As you can see in the grayscale version below, the addition of patterns clearly delineates the segments of the pie chart.

45

Consider patterns and shapes when dealing with other types of graphs, as well. One of the best representations of this concept is a line graph on the ASU Library site.

8

Rather than relying on color alone to distinguish each data line, the developer choose to add varying shapes on each line, further assuring that everyone in their audience can understand the information being conveyed.

The line graphs on that page are also worth looking at for the clever and unobtrusive hide-show drawer used to include the graphs' text alternatives directly on the page beside the visual graphs. 

Alternative text version of the "Membership sales" table

Membership sales
  Gold Silver Bronze
2019 158 289 487
2020 136 174 321
2021 146 273 504


 

 

For developers

For developers and others comfortable with HTML markup, there are a few additional ways to include a text alternative long description.

  1. You can link to the long description:
    1. Inside the <figcaption> element:
      <figure role="group">
        <img src="chart.png" alt="Bar graph of membership sales showing 2021 sales returning to pre-pandemic levels.">
        <figcaption>
          <a href="memberships.html">Membership sales text description of the bar chart</a>
        </figcaption>
      </figure>

       
    2. Beside the image:
      <p>
        <img src="chart.png" alt="Bar graph of membership sales showing 2021 sales returning to pre-pandemic levels."><br>
        <a href="memberships.html">Membership sales text description of the bar chart</a>
      </p>

       
    3. In the longdesc attribute if the long description is located on the same page (not all screen readers can handle links to other pages in the longdesc):
      <p>
        <img src="chart.png" alt="Bar graph of membership sales showing 2021 sales returning to pre-pandemic levels." longdesc="index.html#memberships">
      </p>

       
  2. You also can describe the location of the long description in the ALT text:
    <p>
      <img src="chart.png" alt="Bar graph of membership sales showing 2021 sales returning to pre-pandemic levels. Described under the heading Resurging sales 2021.">
    </p>
    [...]
    <h4>Resurging sales 2021 full text</h4>
      <table>
        <caption>Membership sales</caption>
        <thead>
          <tr>...</tr>
      </table>

     
  3. Less frequent but also acceptable is putting the entire long description inside the longdesc attribute:
    <figure role="group">
      <img src="chart.png" alt="Bar graph of membership sales showing 2021 sales returning to pre-pandemic levels.">
      <figcaption>
        <h2>Overview</h2>
          <p>The bar graph of membership sales shows that 2021 sales returned to pre-pandemic levels.</p>
        <h2>Values</h2>
          <table>
            <caption>Membership sales</caption>
            <thead>
              <tr>...</tr>
          </table>
      </figcaption>
    </figure>
Was this helpful?

 
 

Slack

Accessibility Connections