Charts and graphs are a great way to visually represent data. Whether you are using a line graph, bar graph, or pie chart, there's no question that these pieces of content can help to paint a clear picture of the data in question.
What happens, though, when someone with low-vision or color blindness attempts to read the chart information and are unable to? Since charts and graphs are usually created with solid colors, this could be difficult for some folks to consume. How can we ensure that our charts and graphs are designed in such a way as to be inclusive of those who are unable to perceive color? Also, what about folks who are legally blind and can't see the image at all?
Let's look at a few options to make sure the complex images that we design to represent data are available for everyone to consume.
Charts and graphs
Increasing chart visibility
There are a few things we can do to make our charts and graphs more accessible for people with low-vision or color blindness:
-
Clear labels, which are placed on the chart in a way which denotes which line, bar, or pie piece is responsible for which piece of data, can be helpful.
The idea is to take the legend that would be off to the side and place the label directly near the data point in question. This way, if someone uses zoom software, they wouldn't have to go back and forth from the chart to the legend in order to make the connection.
-
Shapes and textures can be used to visually distinguish between colored lines or pie pieces in a chart.
With textures, someone who might not be able to perceive color will be able to differentiate the data points. The textures should also be defined as part of the legend, in order to make the connection between chart and label.
Quick tests
In order to see how easy or difficult your chart may be to read for someone with color blindness, here are two exercises you could perform as a test:
- Use the NoCoffee Chrome extension to simulate various degrees of color blindness. Is your chart or graph easy or difficult to understand?
- If you're able to, print your chart in black and white. Again, check to see if the data points and information are readable and understandable.
The point here is to ensure content is consumable and the information on your site is color-agnostic.
Adding text alternatives
For people who are legally blind and rely on screen reader software, it's ideal to provide a text alternative for your data.
A text alternative for a chart or graph is usually made available using an HTML table, outputting the data in a tabular structure. What this does is allow someone using assistive technology to gain an understanding of the data without relying on the visual chart or graph.
For example, check out the charts and graphs on the WebAIM Screen Reader User Survey. Notice how each graph is accompanied by an HTML table with the same content made available for screen reader users, or anyone else who prefers to read data in this manner.
Charting libraries
It's worth noting charting libraries like D3.js and Highcharts are available. These libraries take raw data and create charts and graphs in real-time on page load. The downside to using these libraries is that they might not be very accessible and consuming the data could be difficult for some.
For example, when adding the Highcharts Accessibility module, the charts are keyboard friendly, but when attempting to interact with the data while running a screen reader, the data may be difficult to consume. For this reason it's advisable to have the same data available in an HTML table as an alternative.
Infographics
If you're unfamiliar, an infographic is typically a large image with information or data content embedded within the image. The appeal is that the designer can share a lot of data in an interesting, eye-catching, colourful way. The method is effective; there's a reason why Facebook allows users to add color to posts – as a method to catch people's attention while scrolling their feed.
Accessibility concerns
Typically there are a number of issues with this approach that needs to be addressed when publishing an infographic:
- Ensuring color contrast is sufficient for text content to be read against the background
- Providing a text-alternative for all of the data embedded within the image
- Allowing the text to scale on zoom
Color contrast
In order to meet the color contrast rules as set forth by the W3C, use a color picker to grab the color values to test the text color against a few pixels that appear within close proximity of the text. Use a color contrast tool to determine if the colors pass or fail the test in order to ensure the text content is readable.
If the text and background color fail and color values cannot be changed, consider adding a border or drop-shadow to the text. This will increase the readability of the text content without adjusting actual colors in the infographic.
Providing a text alternative
Since an infographic is typically an HTML image, it might be tempting to add all of the content presented in the image within the alt attribute. As we learned in Alt text, stuffing too much content into the alt attribute can be quite cumbersome and overbearing for some users.
At one point in time there was the longdesc attribute. This attribute was to be added to img elements in order to make a connection to more content describing the image. It was a good idea, but poor support and implementation by browser vendors has since rendered the longdesc attribute obsolete.
What's the best approach to providing a text alternative for text embedded, data-heavy imagery? Simply output the text on the same page near the image. With the plain text data in close proximity to the image, blind or low-vision screen reader users will be able to consume the data with ease, folks who are easily distracted by colorful imagery will be able to focus on the plain text, and search engines will also be able to index the content. Everybody wins!
WCAG success criteria
This comes back to 1.1.1 Non-text Content which states:
"All non-text content that is presented to the user has a text alternative that serves the equivalent purpose."