Adding Text for Accessible Data Visualizations
One day when I was explaining to someone the value of visualizing data and how it can help people better understand your findings, it made me wonder what we can do for those who can’t see the actual visualizations. So this blog will cover suggestions on how to make accessible data visualizations for those who are visually impaired and using a screen reader feature.
This applies to people who are partially or completely blind or have low vision that impedes them from viewing data visualizations.
Titles and Headings
If your data viz tool (or wherever you are publishing your viz) distinguishes between headings and paragraphs, then make sure you are using the headings to insert descriptive titles about your charts and the different sections of your visualizations. Do this for each chart and make sure you aren’t accidentally using a formatted paragraph to style your titles/headings. This is because screen readers use HTML and there are special taggings for headings.
Screen readers also notify users what the headings are and can use them to navigate through the page (i.e. skip to a particular chart based on the headings)
Captions
Sometimes a chart explains something so obvious that a caption seems unnecessary, and we forget that not everyone can see our visualizations. I’ve made this mistake many times.
Use captions for each chart to explain what message each chart is conveying. Try to front-load the key takeaway(s) so that screen reader users can decide if they want to keep reading or skip to the next section.
When writing texts, keep screen reader abilities in mind. I.e. make sure your text would be understandable if read out loud and avoid using acronyms without explaining what they stand for.
Alternative Text
Some programs (and even some social media platforms like Linked In and Twitter) have options to write an alternative text for images, also known as alt text. This text won’t be displayed on your page/viz, but will be used by screen readers to describe images. So make sure you populate the alt text section with a description of the image.
One mistake I made while populating this field in the past is starting off by saying “Image of” or “This is a picture of”. Screen readers actually already provide this context for users, so save those characters and jump straight into describing the image.
Example:
Bad: “Bar chart”
Good: “A bar chart showing profit by product category in 2020. Office tables had the greatest profit of $X while lunch bags actually showed a loss of $X.”
Bonus: populating alt text can also help with your SEO optimization for your web pages.
If there is no place to add alternative text, consider adding a description in the captions section by calling out “Image description:”.
Flourish has an example here of a chart visible for sighted viewers compared to what a screen reader will actually be able to read.
Descriptive Filters
If you decide to add a filtering feature for your visualizations and reports, make sure you are describing it well.
I’ve seen too many vaguely titled filters, like “Country”.
Instead, write instructive filters like “Select a country”. Consider also describing what the filter would do, especially if it’s not obvious.
This is what I’ve found from my research and experience. I’m open to suggestions and how I can improve when it comes to adding texts to accompany visualizations. If you have more suggestions, please reach out on Instagram @hanalytx or email me at hana@trending-analyics.com with your suggestions.
Upcoming blog posts will cover other ways of making accessible data visualizations, so stay tuned!