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
- 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…" - 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." - 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: Final /r/ Deletion in Detroit’s African American Speakers
Trudgill (1995) presents the following data about the loss of word-final /r/ in Detroit African American speakers with speakers divided into categories for social class and gender. Numbers are in percentages with higher numbers representing higher numbers of standard forms.
ALT= Bar Chart for Data Comparing Men vs. Women across Classes. See table below for data
Data from: Trudgill, P.(1995) Sociolinguistics: An Introduction to Language and Society, 3rd Edition. Harmondsworth, U.K.: Penguin Books.
Sample Text Description for Detroit Chart
Below is a description of the trends.
Summary of Trends
The numbers show that /r/ dropping becomes more common in lower classes (lower percentages of final /r/), but that women consistently preserve more /r/’s than men across social classes.
That is, women are more likely than men to approach standard English across social classes.
Repeat Data in Chart
This is the chart showing the specific numeric data. Please note that the data table features captions and header rows.
| Gender | Upper Middle Class | Lower Middle | Upper Middle | Lower Working |
|---|---|---|---|---|
| Female | 90% | 70% | 44.2% | 31.7% |
| Male | 66.7% | 52.5% | 20% | 25% |
Charts With Color
Sample Data
These charts will document the number of computers by platform.
| 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.
In Grayscale
Accessible Version of Bar Chart
The data from the first table has been redone as a bar chart, but the colors have been changed to shades of blue. 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.
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.
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.
