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