Charts & Accessibility

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.

Top of Page

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.

Bar Chart for Data Comparing Men vs. Women across Classes. See table below for data
ALT= Bar Chart for Data Comparing Men vs. Women across Classes. See table below for data

Data from: Turdgill, 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 then men across social classes.

That is, women are more likely then 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.

Percentage of Final /r/ in Detroit African American Speakers Across Gender and Class
Gender Upper Middle Class Lower Middle Upper Middle Lower Working
Female 90% 70% 44.2% 31.7%
Male 66.7% 52.5% 20% 25%

Top Of Page

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 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.

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