Introduction
When putting together a visualization or data story, it’s essential to remember that not everyone experiences the world as you do. A color palette that looks pretty to your eye might be challenging to differentiate for some viewers. Or a chart that you find easy to “read” might be difficult to interpret for someone less data literate. As visualization becomes increasingly important, so does the need to make sure the graphics we publish are accessible to as many people as possible.
Things you can do in Flourish to improve accessibility
- Text: Good, clear titles, annotations, and labels are unparalleled in their ability to guide someone in reading a visualization. Particularly for less widely known chart types, it’s best not to assume that your graphic will be immediately understandable to everyone. Learn more about accessible text and labelling in our blog post.
- Screen-reader descriptions: All our visualization templates come with screen-reader descriptions to offer an alternative to the graphic’s visual aspect. In addition, Flourish titles, subtitles, and footers are read out by screen readers by default, either on click or when the assistive technology is reading through an entire page containing embedded graphics. Learn more about screenreader descriptions in Flourish in our blog post.
- Color: High contrast colors, along with separation and space, are crucial for helping people with vision impairments read your charts. Whenever possible, use colors that are bold and clear enough for people to see both text and graphical elements, such as lines and points. 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.
Flourish accessibility features
Keyboard-navigable controls: One essential aspect of accessibility is ensuring that users can effectively navigate and interact with your platform using only a keyboard. Keyboard-navigable controls allow users with motor impairments or those who rely on alternative input devices to efficiently access and utilize all features of your platform. We’ve made most of our default controls, such as dropdowns, buttons, and sliders, keyboard-navigable by default. However, we offer around 30 different visualization templates, each with unique requirements and challenges. While we work diligently to ensure keyboard accessibility across all templates, there may be instances where specific elements are not yet fully optimized for keyboard navigation. We encourage you to review the table embedded below, which details the keyboard navigability status of each template.
Auto-contrast labels on chart elements and text stroke options: Achieving the right contrast between text and chart elements is essential for making your visualizations accessible and easy to read for all users. 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 Advanced Perceptual Contrast Algorithm (APCA). This feature helps users with vision impairments, such as color blindness, to easily discern the information displayed in your charts. We are working diligently to implement auto-contrasting text on chart elements across all our templates. Another essential feature we offer to enhance the accessibility of our visualizations is the text stroke option. This feature allows users to apply a stroke to text elements within charts, further improving the contrast between text and chart elements. Text strokes help ensure that your text remains clear and legible even when displayed against complex or visually busy backgrounds. Please refer to the table below to learn which templates currently support auto-contrasting text on chart elements and which ones support text stroke options.
Keyboard-navigable data points: As part of our continued dedication to an inclusive and accessible platform, we’re actively enhancing our visualization templates to support both screenreader descriptions and readable/tabbable primary graphics. Users can now interact with and explore data points in charts and graphs using their keyboards, while simultaneously benefiting from screenreader descriptions. This dual feature ensures users, including those with motor impairments or those who simply prefer keyboard navigation, can fully immerse themselves in the visualizations and derive meaningful insights from the data. For details on which templates currently support this functionality, please refer to the table below and our roadmap.
Prefers-reduced-motion support: 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. To make our platform more accessible, we’ve implemented a feature that respects the ‘prefers-reduced-motion’ setting at a user’s system level across relevant visualization types. If a user has this setting enabled, any unnecessary animations within the visualization will be automatically removed. This way, users who prefer reduced motion can engage with your visualizations comfortably and effectively. Please refer to the table below to learn which templates currently support the ‘prefers-reduced-motion’ feature.
Table of accessibility features
Below is a table detailing which of our templates support specific accessibility features and the versions they were introduced in. It’s a quick reference to keep you informed about Flourish’s ongoing accessibility enhancements across our range of templates.
Logging accessibility feedback and requests
We encourage our users to help us improve the platform’s accessibility by reporting any issues they encounter. If you come across an element within a Flourish embed that appears to lack keyboard accessibility, please send us a bug report, including the URL and a description of the problematic elements. Your feedback is invaluable in our ongoing efforts to create a more inclusive and accessible platform for everyone.
Accessibility roadmap
At Flourish, we are deeply committed to making our platform accessible and inclusive for all users. To achieve this goal, we have developed an accessibility roadmap that lays out our ongoing efforts to enhance the user experience. This roadmap outlines our plans to identify, prioritize, and implement accessibility improvements across our platform. By regularly evaluating and updating our roadmap, we ensure that our platform remains aligned with the latest accessibility standards and best practices.
