Requirements in brief
- Do not use color alone to convey meaning
- Each chart should have a heading title
- Ensure items in chart are labeled visibly
- Provide a table alternative for the chart
- Table alternatives should have proper structure and heading titles
- Provide summaries for tables on the web
- Provide summary alt text for chart images
The challenge with data visualization
Data Visualization is extremely useful to help in the understanding of data. However, by nature it is visually biased. There’s not much we can do to make a visualization not visually biased, so we need to make sure that there are alternatives to these visuals that convey the data, but most importantly the meaning that the visualization illustrates. The following information includes some strategies for more accessible visual design, descriptions and alternatives for static charts, and recommendations for when building interactive visualizations with tools like PowerBI, Tableau, or custom development using libraries like Highcharts.
Lighten the cognitive load
It is important to keep data simple and logical. If a chart looks confusing visually, then someone using a screen reader and listening to it will find it even more so. Building a mental model of a visualization from hearing a description is challenging enough, not to mention if the chart is already visually challenging. Do your best to simplify the presentation of the data, or consider breaking it down into chunks. Consider multiple visuals for different aspects of the data, instead of attempting to combine all information into one chart by increasing the colors, symbols, or segments in the chart.
For example, a segmented bar chart can be useful when demonstrating changes in the percentage of something that is a part of a whole. But if the amount of each of the bars is not a divided 100%, it can be harder to understand the percentages each segment makes up visually. If the values are what is more important, then separating those segments into their own charts will be easier to understand.
The following examples show some steps that could be taken to reduce cognitive load in a presentation of three segments of data. These examples contain additional accessibility issues that will be addressed after this section.
Problematic: This segmented bar chart has multiple accessibility issues, but one of the biggest problems is how confusing it is to interpret. Not only do you have to figure out the total value of each bar with no label, but then you have to imagine a percentage of each segment within the percentage of the whole bar.
Problematic, but better: This segmented bar chart is using segments to show a division of 100%. This makes it easier to interpret, because you aren't trying to understand multiple percentages. However, it is still lacking labels for the information.
The separate bars make it easier to tell what the values are for each segment, versus the previous segmented bar chart. However, we are still missing some accessibility considerations like labels here.
Break data out into easier views
A better way to present this data more clearly, would be to separate each segment out into its own bar. This makes values more clear for each category.
Try not to focus on how data may have been presented previously, consider having multiple ways to view data, and look for opportunities to make what is being presented as obvious as possible.
Use of color and identification
Charts often use color alone to identify categories of data. Using color in a chart is fine, but we can’t use it by itself to identify something. Colorblind and low vision users will have difficulty identifying colors in the chart, particularly when trying to compare them to a legend. Having a legend that includes patterns, shapes, symbols, text or numeric labels will make it much easier for users with visual impairments to identify the data in your chart. Let's review several helpful options.
Use of patterns
If you have simple charts, patterns can be a way to make your chart more accessible, as they allow someone to identify differences without needing to see difference in color. Using too many patterns can be visually distracting, so it is not recommended for complex data sets.
The following images show an example of a line graph and a bar chart using patterns to identify segments.
This graph uses color alone. There is a legend for the 3 colors in the chart, but there is no other way to determine which line is which without using color.
This graph uses patterns, which provides a visual cue other than color for viewers to identify each category.
Use of shapes
As an alternative to patterns, shapes can be used to identify different segments. This is something commonly done with line graphs to help differentiate each line. The shapes could be placed at the ends of the line, or could be placed at each data point. Having these data point markers can be very useful in an interactive chart, where the user could select those data points to get more information.
A shape at the beginning and end of each line adds another way to identify categories besides color. Shapes can also be placed on each data point in some tools.
Use of symbols
The following example shows a status chart with green, yellow and red circles indicating status. While this process is very common, red/green colorblindness is the most common form of colorblindness, so the pairing of these colors for meaning creates challenges. Adding symbols to the chart is another way to not use color alone.
The only way to identify the status in this chart is by being able to see color.
In this status chart, color is still used, but symbols have been added as an alternative way to identify the status.
Use of numbers
A heat map is a popular way to display status in a dashboard, that may have a range of colors used. In this case, it may be more difficult to identify many grades of status with symbols or shapes. Using a numeric scale to identify severity in this sort of chart will be helpful. It is also helpful to stick with one color, and use shades of that color to determine severity, rather than using many different colors.
Like the previous status chart with only colored circles, this heat map example uses color alone.
This heat map uses the numbers 0, 1, and 2 to identify severity. This is a useful approach if you have a large scale of things that need to be indicated in your heat map.
Labeling charts
Like in the heat map above, labeling charts is the best way to make them accessible visibly. While we can increase understanding and identification with shapes and patterns, having actual labels in a chart is optimal, and should be done whenever possible. Chart labels should identify the category, and if the value is not clear, consider adding value labels as well. Following are some examples of labeled charts.
This pie chart's segments are labeled with lines pointing to each. It also contains percentage values within each segment.
This bar chart is using letter labels for each segment that match up with the legend. It also has percentages above each segment.
Describing charts
The purpose of a chart is to understand the data better, so we need to present that understanding as a summary or alt text. If describing your chart will be brief, you can provide alt text describing it. If your chart is more complex, it can be helpful to place a chart summary as a caption or paragraph below it.
Alt text describing a chart should not contain all of the values within the chart. It is not meant to deliver all of the data, but to describe a trend or key takeaway from the chart — whatever the visual helps you understand, as opposed to a detailed description of the data itself. A description of the data should be delivered in a table that accompanies the chart, which will reviewed in the next section.
Learn more about alternative text for images.
Following are some examples of appropriate chart summaries.
Chart summary: This line graph shows that tourism remains low throughout the winter and spring months. It begins to rise sharply in May to a peak in July, with a sharp decline from August to September.
Chart summary: This pie chart shows that more than half of sales occur in the first quarter, while about a quarter of sales occur in the second quarter. The third and fourth quarter split the rest of the yearly sales.
Table alternatives
Chart data is too much detail to put into alt text, so we need to provide a table alternative to present the data. A table should never be an image, but must be an actual table in the document or webpage. Screen reader users can navigate a table and hear the contents of each cell, and its relationship to other cells in the column or row.
If you have a complex visualization like a map, the only way a screen reader user is going to be able to get the data is from a table. For large tables of data like this, ensure that the table can be sorted and filtered.
Documents
When creating a table in a Word or PDF document, be sure to mark up your table correctly.
Find out about tables in Acrobat Pro
Web pages
If presenting your chart and table on a web page, there are several techniques you can use to do this. If you are custom developing a web page, one common technique is to use tabs to switch between a chart and table view. You can also place the table and chart next to each other, or one following the other.
Following is an example of presenting an image chart with description along with a table in the Mass.gov CMS, using the previous pie chart example.
Example: Sales numbers 2024
Chart summary: This pie chart shows that more than half of sales occur in the first quarter, while about a quarter of sales occur in the second quarter. The third and fourth quarter split the rest of the yearly sales.
| Date | Profit (in millions) | Percent |
|---|---|---|
| 1st Quarter | $8.2 | 59% |
| 2nd Quarter | $3.2 | 22% |
| 3rd Quarter | $1.4 | 10% |
| 4th Quarter | $1.2 | 9% |
Dashboards and interactive charts
If you are creating dashboards with a tool like PowerBI or Tableau, be aware that there will be some accessibility limitations. Just because a feature is available in the tool, does not mean that feature is guaranteed to be accessible. You may need to consider alternative presentations.
If you are developing a custom dashboard with a library like Highcharts, be sure to install any accessibility modules that come with the library, and be aware that there may be some custom development to add functionality.
Either way, building a dashboard is essentially creating an entire web page, and it should be run through the web testing checklist.
Dashboard considerations
Instructions: If there are any interactions or requirements to use features in your dashboard, provide on-screen instructions.
Table alternatives: Even if your chart has interactive elements, be sure to offer a table alternative. That table should have sorting functionality, and if it is a large table, filters.
Filtering: Keep filtering processes simple. Complex nested components like checkboxes or radio buttons within drop-down menus will need to be tested with a keyboard and screen reader. Opt for search filters or different drop-downs for different aspects of data.
Hover: If your interactive chart shows additional data on hover, ensure that data also shows on keyboard focus with the TAB key, and that it is reachable with a screen reader. Do not hide important information in a hover state, and instead use that for supplemental info.
Data overlays: Do not use data overlay layers in PowerBI or Tableau. These layers are typically unreachable with a keyboard or screen reader.
Tab or reading order: All interactive elements should be reachable with the TAB key on the keyboard, and show a visible focus ring. Text and headings should not be in the tab order. Tab order should be top to bottom, left to right.
Responsiveness: Your dashboard should be responsive to different devices. Not only does responsiveness affect mobile devices, it also ensures content will reflow properly when browser zoom is used.
Targets: Ensure that any items meant to be clicked with a mouse are at least 24px by 24px. Ensure that any items meant to be tapped on mobile are at least 48px by 48px.