Charts, graphs and maps use visuals to convey complex images to users. But since they are images, they provide serious accessibility issues to color blind users and users of screen readers. See Accessible and Inaccessible Chart Samples for details on how to make charts more accessible.
If the data in a chart, graph or chart is crucial to the content of the 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.
SECTION 508 - A text equivalent for every non-text element shall be provided.
Supplement color coding of charts with texture, differences in line style, text in
graphs or shades of one color to improve accessibility for color blind 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.
SECTION 508 - Web pages shall be designed so that all information conveyed with color is also available without color.
Don't convert tables of data into images - that's what data tables are for.
Here is a line graph of showing operating system preference over time. Note that data is approximate for demonstration purposes.
There are several approaches you can take depending on what data you wish to highlight. One is to summarize the key trends of the chart as below.
Sample Text Summary - In the early 1990s, the Macintosh was extremely popular among college students (about 90%), but by 2005, Windows was the most popular (85%) with Linux (10%) and Mac (5%) far behind.
Another approach is just to repeat a data table with the scope and TH tags properly marked as below. This allows users of screen readers to access the same numeric data that is available in the chart. In addition, a caption or SUMMARY tag can be added to provide further details.
| Platform | 1990 | 2000 |
|---|---|---|
| Windows | 10% | 80% |
| Macintosh | 90% | 5% |
| Linux | 0% | 15% |
These charts will document the number of computers by platform.
Preferred Computer Platform in Linguistics Seminar of Twenty Students Platform Number of Students Windows 16 Linux 3 Macintosh 1
Below are some examples of charts with inaccessible and accessible color choices and formats.
Below is an image of an inaccessible bar chart for distribution of platforms in 2003. Solid red and green are used for colors and may not be distinguishable for color blind users.
From a color perspective, the image is inaccessible because charts are color coded in shades of red, green and blue which are of similar brightness. The only key to the chart refers to the colors; thus only color conveys information.
The data from the first table has been redone as a bar chart, but the colors have been changed to shades of blue. Color blind 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.
For line charts, changing the style of the graph lines and adding labels increases usability.
This is an inaccessible line chart based on the data in the table comparing percentage of Mac and Windows users from 1990 versus 2003.
This chart uses lines three colors of similar brightness with a key that only refers to color. In grayscale, these colors are virtually identical.
The chart replaces three solid lines with one solid line and two distinctive solid lines and adds labels for each line.
Site Menu:
Home Page/Main Menu
| Section 508 Guidelines
| Quick Checklist
| Details by Tag
| Links
| I.T.S. Seminar Page
| Sitemap
©1999-2006 Pennsylvania State University.
This Web page is hosted by (by Teaching and Learning with Technology, a unit of Information Technology Services. Please contact the Webmaster if you have any questions.