The data visualization industry is rapidly embracing the principles of accessibility and making notable strides: Last year, the New York Times appointed its first Accessibility Visuals Editor. The body of research on the topic is growing, new tools like Data Navigator are finding new ways to navigate content, and globally, organizations are adopting best practices to become more accessible. We’re all learning and creating better standards together, which is a promising development.
But taking a closer look, we can see that some existing solutions are insufficient and that it’s difficult to apply existing guidelines across various technologies and use cases. Conventional accessibility guidelines like WCAG are based on basic HTML pages with a clearly defined set of components, which are very different from rich, interactive visualizations with custom elements. Moreover, accessibility requirements can sometimes pull in different directions, depending on the type of impairment you’re building a solution for.
For example, while providing raw data tables as a fallback option to visual charts is often recommended, this approach may work well for certain types of disabilities but not others – and it doesn’t in any way offer readers to spot patterns, trends and outliers – which is arguably what data visualization is all about.
Data visualizations are great for a number of reasons: They speak to our visual nature by breaking down insights into visual patterns our brains can process (making them a kind of accessibility tool themselves). They make complex data more digestible by encapsulating vast amounts of information. And they’ve become an absolute necessity for conveying critical information, illustrated for example by the pandemic, where well-designed charts and maps became the status quo for communicating fundamental facts.
Because charts are everywhere, we need to ensure that everyone can consume the messages they are conveying. At Flourish, we aim to transcend basic compliance, focusing on enhancing user engagement and understanding.
Accessibility isn’t just about ticking off boxes; it’s about inclusivity. Whether it’s color blindness, motor difficulties, or cognitive challenges, the goal is to make data visualizations accessible and meaningful to everyone.
Non-accessible visualizations not only limit user engagement but can also incur legal ramifications. Meeting Web Content Accessibility Guidelines (WCAG) AA standards is increasingly becoming a legal necessity, leading to potential financial and legal repercussions for non-compliance.
While Flourish hasn’t yet pursued AA accreditation, our platform offers tools that enable you to make your charts accessible. In close partnership with our customers, we’ve rolled out several enhancements over the past six months to meet these standards. Let’s take a closer look:
Keyboard navigability is a cornerstone of web accessibility. For users that are not able to use a mouse because of functional or visual impairments, interactive data visualizations can be frustratingly out of reach for meaningful interaction or learning. Often they feature content that is not accessible without hovering or clicking.
One way to offer an accessible experience to these users is to ensure they can access any visualization content via the tab key on their keyboard instead of just a mouse.
Over the past few months, we’ve been hard at work enhancing the keyboard navigability of our visualization templates. As of now, 30 out of approximately 40 visualization templates are fully compatible with both mouse and keyboard interactions. This allows users to delve into data points, adjust filters, and engage with popup content, regardless of whether they have access to a mouse. We’re committed to extending this functionality to more templates in the near future. For real-time updates on accessibility features across our templates, visit our accessibility page.
We’ve long offered built-in support for screen readers in our core visualization templates, making titles, subtitles, and footers automatically read out whilst also offering the option to supply a description of the main visual aspects in your visualization.
Our latest improvements extend screen-reader support to chart elements themselves by incorporating a comprehensive set of ARIA attributes. ARIA, or Accessible Rich Internet Applications, complements HTML by providing extra layers of description and context for screen readers. This enhancement means that more complex elements like buttons, data points, and popups become more intelligible to screenreaders.
These are the ARIA attributes we use to make Flourish visualizations accessible to screenreaders:
- For the ARIA role of the data point, we use
- For the ARIA label of the data point, we use the same content as the popup, eg.:
aria-label="United Kingdom, Life Expectancy 81.6 years"
- For the ARIA role description of the data point, we use
We’ve also rolled out a dual experience: a fully readable main graphic paired with detailed screen-reader descriptions. Our newly-integrated ARIA attributes ensure that screen readers interpret data points and popups in a meaningful way, whilst a screen-reader description is great to supplement the main visual aspect of your chart.
High contrast colors, along with separation and space, are crucial for helping people with vision impairments read your charts. By default, colors in Flourish palettes meet accessibility requirements for graphical elements, and it’s possible to set up your company theme to include accessible colors as well.
In addition to this, some of our templates already support auto-contrast labels on chart elements. These automatically adjust the text color to achieve the best contrast with the surrounding graphical elements based on the new Advanced Perceptual Contrast Algorithm (APCA). Unlike The Web Content Accessibility Guidelines’ algorithm, which we used before, APCA provides a more accurate estimation of human contrast perception, which depends on which color is used for text and which for the background, and which text size and weight is used.
We’re currently working on adding auto-contrasting features across even more chart elements and features, so stay tuned for feature developments in the coming months.
Animations can enhance the visual experience of your data visualizations, but for users with vestibular disorders or sensitivities to motion, they can be disorienting or distracting. Relevant Flourish templates now respect system-level “Reduce motion” settings via the
prefers-reduced-motion CSS media feature, ensuring a comfortable user experience.
When creating data visualizations, it’s not just about choosing the right chart or graph; it’s about knowing your audience and the message you want to share. Each element of your visualization — from the type of chart, to the data you include, to the language you use — should be carefully selected. Being open to change and creative in how you present information can make your visualizations more effective and memorable.
Accessibility should be a key part of this process, just like picking the right chart or a fitting title. Your choices in text labels, color schemes, and screen-reader descriptions are vital for meeting accessibility guidelines. For more tips on what you can do to design more accessible data visualizations, check out this blog post.
Next up, we aim to focus on improved auto-contrasting across even more templates and chart elements, as well as dark mode, ensuring the user can view a table of the raw data, or download a CSV, a “skip chart” button hidden somewhere, as now a keyboard-only user would take forever to Tab through the chart to get to any links or buttons below the chart.
That’s it for this detailed overview of what we’re doing to make visualizations created with Flourish more accessible. We’re aware there are still loads of improvements to make and many things to learn, so we’d love to hear your suggestions, feedback and ideas on the topic. Feel free to get in touch via Twitter or email! Stay on top of developments in this space on our accessibility page.