Page Content

Charts, graphs and maps use visuals to convey complex images to users. But since they are images, these media provide serious accessibility issues to colorblind users and users of screen readers. See the examples on this page for details on how to make charts more accessible.

Synopsis

  1. If the data in a chart, graph or map is crucial to the content of a Web page, then you must provide a text description of the image. In some cases, a numeric table replicating the chart data could provide additional accessibility.

    WCAG 2.0 Guideline 1.1.1—"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose…"

  2. Supplement color-coding of charts with texture, differences in line style, text in graphs or different shades of color to improve accessibility for colorblind users. Charts should be readable in black and white.
    NOTE: The default settings of the Chart Wizard in Excel are not color accessible. Use the formatting tools to change line styles and colors.

    WCAG 2.0 Guideline 1.4.1—"Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element."

  3. Don’t convert tables of data into images—use an actual data table instead.

Text Descriptions for Charts

Strategies

Generally speaking an ALT tag cannot do justice to a complex chart. One way to describe a chart is to provide both a text summary and a properly coded data table near the chart.

This serves multiple audiences because a chart can show trends, but a table can provide exact data for those who are interested.

Example: Languages in U.S. versus Pennsylvania

The following bar chart shows the percentage of English versus Spanish versus other languages in the U.S. versus Pennsylvania, Philadelphia and Pittsburgh.

Bar Chart 'Home Language By Region' showing percentage of English, Spanish and Other Languages for the U.S., Pennsylvania, Philadelphia and Pittsburgh. See specific data in the summary and table below.

ALT= Bar Chart ‘Home Language By Region’ showing percentage of English, Spanish and Other Languages for the U.S., Pennsylvania, Philadelphia and Pittsburgh. See specific data in the summary and table below.

Data from: U.S. Census.

Sample Text Description for Language Chart

Below is a description of the trends.

Summary of Trends

The chart above shows that the percentage of monolingual English speakers is slightly higher in Pennsylvania than the rest of the U.S. – with the exception of Philadelphia.

Note that in Pittsburgh, the percentage of Spanish speakers is much lower than elsewhere in the state or country.

Repeat Data in Chart

This is the chart showing the specific numeric data. Please note that the data table features captions and header rows.

Languages in U.S. versus Pennsylvania
Language U.S.A. Pennsylvania Philadelpha Pittsburgh
English 79.29% 89.68% 78.45% 93.07%
Spanish 12.85% 4.37% 9.90% 1.38%
Other 7.86% 5.95% 11.65% 5.56%

Charts With Color

Sample Data

These charts will document the number of computers by platform.

Preferred Computer Platform  in Linguistics Seminar
Platform Number of Students
Windows 16
Linux 3
Macintosh 1

 

Bar Charts

Below are some examples of charts with inaccessible and accessible color choices
and formats.

Inaccessible Bar Chart

Below is an image of an inaccessible bar chart for distribution of platforms in 2003. Solid sections of red and green are used, both of similar brightness, and therefore may not be distinguishable for colorblind users.

In addition, the only key to the chart refers to the colors, thus information is only conveyed by color.

chart with inaccessible color

In Grayscale

chart in grayscale, the gray bars

Accessible Version of Bar Chart

The bar chart have been changed to shades of blue (with paler bars set with a dark border). Colorblind users can use the different levels of darkness to tell the platforms apart. In addition, labels for each platform have been added to the bottom of the chart, so that viewers do not even have to refer to the key.

bar chart with accessible colors

 

Line Charts

For line charts, changing the style of the graph lines and adding labels increases usability.

Inaccessible Line Chart

This is an inaccessible line chart based on the data in the table
comparing percentage of Mac and Windows users in 1990 and 2003.

Inaccessible line chart. Data shows Mac use declining and Windows and Linux use increasing

As with the previous inaccessible chart, this chart uses three colors of lines, all of similar brightness, with a key that only refers to color. In grayscale, these colors are virtually identical.

 

Accessible Version of Line Chart

This chart replaces three solid lines with one solid line and two dotted lines, with labels for each.

Accessible Line Chart. Same Data as previous image.

Top of Page

Last Update: March 26, 2024