New screen-reader settings to make your visualizations more accessible

This year has highlighted the critical role that data visualization can play in informing society. Most of us have been consuming charts, maps and tables about the coronavirus crisis daily with our cup of coffee, improving our data literacy skills along the way. But as visualization becomes ever more important, so too does the need to make sure the graphics we publish are usable by as many people as possible.

Online accessibility is a huge area, and lots of organizations aim for high accessibility standards into their web publishing. But in the world of interactive data-driven content, accessibility is a relatively new field. We’re determined to innovate in this area, and today, we’re excited to announce a step on that journey: screen-reader settings to provide a text alternative to visual elements.

What a sighted user sees

What a screen reader sees

How it works

Titles, subtitles and footers in your visualizations were always readable by screen readers, and that’s still true. But now you can optionally provide screen readers with an text alternative for the “main” visual part of the graphic. This is configured in a new “Accessibility” settings block you’ll find in all our core templates. If you set your main visualization container to be readable, screen readers will attempt to read the content inside it. That might be what you want for a text-based visual such as a Cards grid.

For a chart, however, the text in the main visual container is usually an unhelpful scattering of unordered data-point labels, axis labels and annotations. This is somewhere between unhelpful and deeply annoying for screen-reader users.

Hence for most visualizations, you’ll want to stick with the default setting: hidden. In this mode you can write a text description that will be read out in place of the visual element when the user taps on it or when a screen reader is reading out the entire page.

Under the hood, the text is added to the page as a hidden paragraph which becomes visible to screen readers via an aria-describedBy attribute on the main visual container, the contents of which gets an aria-hidden attribute.

As part of this update, we’ve also added a title attribute to the iframes that visualizations are embedded in, to differentiate their content as “visual or interactive content”.

How to write a good screen-reader description

Whether you’re designing for sighted or non-sighted users, the main title and subtitle should usually be descriptive, summarizing the main point of the graphic rather than just describing what data is being visualized. As your titles and subtitles in Flourish visualizations will always be read out by screen readers, it doesn’t make sense to repeat these in the screen-reader description.

Instead, use the screen reader text to provide an alternative to the visual aspect of the graphic specifically. What type of chart is it? What aspects or values are the most important and stand out? Try and get in all the key details while keeping the message as short as possible.

Lots more to do

Screen-reader text is only one part of the accessibility picture. There’s lots more to consider, from text sizing and color contrast to keyboard navigability and giving access to the underlying data for non-visual exploration, as shown in the example above via a simple link in the footer.

We have a long way to go and as we work more in this areas we’d love to hear your suggestions and feedback. Feel free to get in touch via Twitter or hello@flourish.studio.