Writing Alternative Text for Complex Images and Graphics

Imagery and graphics that display a dense amount of information still require proper alternative text, supporting body text on the page, or a healthy and balanced combination of these two features. We’ll take a look at some examples of charts, graphs, and maps and give some direction on how best to describe them in your alternative text and page copy to ensure proper accessibility.

Color contrast in charts, graphs, and maps #

A note about color in your charts, graphs, or maps on your website: Please ensure that all colors used to represent different values have enough contrast to be discernible to those who may have color blindness or other visual impairments. An acceptable alternative is to use patterned fills in these informational graphics in lieu of relying solely on differences in color. It is inadvisable to rely on color alone to illustrate differences in values in any context on the web. Instead, ensure that data is properly labelled and uses some other characteristic to distinguish different values.

Flowcharts #

Flowcharts can range in their complexity. For more simpler and straightforward flowcharts, simply providing a description of the chart can be handled via the graphic’s alternative text.

However, for more complex flowcharts with multiple starting points and paths, it is typically going to be more beneficial to provide a simple statement about the overall thesis of the flowchart as the alternative text, then referring the person viewing the page to content further down the page that provides more detail.

Consider this flowchart:

It would not be acceptable to use the following for this chart’s alternative text:

Neurodegeneration

Ways neurodegeneration occurs.

For this flowchart, we have provided this alternative text:

A flowchart showing four different ways that neurodegeneration can occur. Please refer to the subsequent text for details.

Further along in the page’s content—preferably, right after the graphic—we can describe the flowchart’s meaning. We can do this by simply describing the flowchart using paragraphs of text:

Folded proteins can react to heat shock, E.R. stress, or oxidative stress, resulting in unfolded proteins. These then can be further degraded by chaperone-mediated autophagy, proteasomal degradation, chaperone-mediated folding resulting in a refolded protein, or aggregation resulting in aging.

It might also make sense to use a combination of numbered or bulleted lists to describe an outline of the flowchart’s flow:

1. Folded protein reacts to:
   • Heat shock
   • E.R. stress
   • Oxidative stress
2. Resulting in an unfolded protein. This can then be further degraded by:
   • Chaperone-mediated autophagy
   • Proteasomal degradation
   • Chaperone-mediated folding
     • Results in a folded protein
   • Aggregation
     • Results in aging

Either way, the text of the page is now supporting the graphic and allowing its meaning to be conveyed to people viewing the page without needing to see the graphic. Those who can see the graphic are able to comprehend the meaning visually. Those without the benefit of seeing the chart can also understand what the flowchart is attempting to convey.

Maps #

Like flowcharts, maps can have a varying amount of information being presented in them. When including map images in a webpage, it is important to describe in as much reasonable detail what the map is attempting to convey, all while keeping in mind the context of the page the map appears.

Take, for example, this map:

For the above graphic, alternative text along the lines of the following would not be acceptable:

Two maps comparing Human Lyme Disease

This text lacks key details about what kind of maps are being displayed, and the particular details both maps are trying to illustrate.

Instead, we have chosen the following as the alternative text for the map graphic:

Two county maps of West Virginia, comparing the rates of Human Lyme Dsease in canine and feline subjects. Refer to the text of this page for more details.

In our hypothetical situation, we would then need to further discuss the details of what the maps are attempting to convey elsewhere on the page where the graphic appears:

As shown in the maps above, both canines and felines have higher concentrations of Human Lyme Disease incidences per 100,000 in Kanawa County and the north central, panhandles, extreme southern counties of the state. Counts of Ixodes scapularis being removed in these counties sometimes ranging from 22 to 93 times. The Human Lyme Disease Incidence per 100,000 rate was consistently higher than 44.3 in these same areas of the state.

Alternatively, to display more precise raw data on a county-by-county basis, a custom solution could be created for such a scenario, where a data table could be output. That table could include columns for:

• County name
• Human Lyme Disease Incidence per 100,000
• Number of Ixodes scapularis Removed

Please note: by default most H.S.C. websites are not set up to handle data entry and output in the form of a data table that matches the above description. A custom solution developed by the H.S.C. Web team would need to be created.