Imagine trying to understand the trends in a line graph or the flow of a process diagram based solely on a few lines of text. You might get a basic understanding of the data — but you’re not going to have the same experience as someone who actually sees the graphic.
While alternative text (alt text) is crucial for making images accessible to people who have visual impairments, it’s necessarily limited. Alt text often falls short when it comes to conveying the nuances of intricate visuals like charts, diagrams, and infographics.
In this article, we’ll discuss a few techniques for making complex graphics more accessible. For detailed guidance with a specific accessibility issue, send us a message to connect with an expert.
Why do charts, infographics, and other complex graphics need to be accessible, anyway?
If you’re using charts, graphs, or any other “complex" visual material, you’re doing so for a reason. You want to convey relationships between data points, reveal patterns, or illustrate a complex process.
You want all users to have equivalent access to that information. You also want them to be equivalently engaged. Alt text, while important, won’t accomplish that goal.
For some types of content, that might mean that alt text alone is not equivalent for compliance. The Web Content Accessibility Guidelines (WCAG), widely seen as the international standards for digital accessibility, requires that all non-text content has a text alternative that “serves an equivalent purpose.”
Granted, you’re unlikely to face a lawsuit under the Americans with Disabilities Act (ADA) if you make a good faith effort by providing alt text — but reasonably, you want to provide an accessible experience to enjoy the full business benefits of inclusive design.
And if you consider accessibility when building your graphics, you don’t need to take many additional steps to meet that standard.
Related: Inclusive Design Vs. Accessible Design: Understanding the Differences
How can you make data visualizations more accessible?
Hopefully, you’re presenting complex visualizations with HTML and CSS — not through a pre-rendered image.
HTML and CSS are powerful tools for presenting complex visualizations. By using HTML table elements, you can give screen reader users more control over your content; they can dive into the data (instead of just listening to a brief description of a JPG). You can also make your visuals responsive (adaptable to different viewports).
To that end, keep these tips in mind:
- Label axes, data points, and other elements that may help users understand the data.
- Don’t use color or shape alone to convey meaning. Learn more: Use of Color for Accessibility Explained.
- Make sure all colors meet WCAG’s thresholds for color contrast.
- Wherever possible, use native HTML. Avoid using ARIA (Accessible Rich Internet Applications) unless absolutely necessary. Learn more: Why No ARIA Is Better Than Bad ARIA.
- Wherever possible, keep your designs simple. That’s just good practice from a design standpoint — simpler graphics will make an impression on a larger number of users.
- As we’ve noted, alt text may not be enough for all users — but it’s still important. Make sure to follow the best practices for writing alt text for infographics.
- Consider providing a separate "long description" that goes into greater detail than the alt text. This can appear above the graphic (or linked, if the alternative version will require more than a few sentences of text).
Finally, test your work. Make sure that your visualizations are fully navigable with a keyboard alone (no mouse) and that the focus order makes sense.
Related: Does WCAG 2.1 Require Responsive Design?
Remember, accessibility doesn't limit your options
Creating accessible content won’t make your website ugly or boring — you’ll simply reach more people and provide them with more ways to engage with your brand.
WCAG provides an excellent framework for building accessibility into your design process. To learn more, read: 4 Ways to Build an Accessible Design Philosophy.
And if you’re ready to embrace inclusive design, we’re here to help. Send us a message to connect with an expert or get started with a free website analysis.
