Data Visualizations

The endeavor to create accessible data visualizations has been a multi-year journey of research, action, and continual improvement to ensure comprehensive user inclusivity.

The original start to a data visualization library was done by the design system team. Our investigation into potential solutions led us to explore Highcharts and Victory Charts. Both tools offered unique advantages, but after rigorous evaluation, we committed to Victory Charts based on their superior functional capacity and compatibility with our project's specific requirements.

With a decision made on the foundation, the design system team embarked on constructing data visualizations with a keen eye on accessibility. This included extensive build out and accessibility testing by myself to accommodate screen reader users and ensure keyboard navigability. Concurrently, I crafted a color palette that would not only resonate with our brand identity but also accommodate users with color vision discrepancies. Our efforts resulted in the successful deployment of Figma and code library visualizations that were as informative as they were inclusive.

Video of the line charts designed by the design system with different dash styles, different data point shapes and the ability to navigate the charts easily with a keyboard only

This video shows the keyboard functionality for the bar chart as built out by the design system team. There was extra attention paid to the relationship in the tooltip to ensure that a screen reader user could easily understand each data point in relation to others.

Evolution of data visualization

As our project evolved, we found that many teams within our company had adopted Looker for their data visualization needs. This initiated a new chapter in our accessibility quest. Aimed at bridging the accessibility gap, we pursued an in-depth review of Looker charts' compatibility with accessibility tools. Despite our efforts, we encountered challenges with dark mode interfacing and screen reader support, revealing significant limitations for users relying on these accessibility features.

The narrative changed with the recent transition to MUI charts—this shift provided an opportunity to infuse our data visualization tools with fresh perspectives on accessibility. Currently, I am leading the charge in crafting extensive documentation and providing guidance to designers and developers. Our goals are to meticulously test the MUI charts' performance against the original Victory benchmarks and push the envelope on accessible design techniques.

Current work in progress

As part of this latest initiative, we have introduced an expanded color palette, crafted to be colorblind friendly. With the knowledge that accessibility cannot be assumed but must be empirically verified, we have engaged with our internal community, testing these palettes with users who have different types of color blindness. These sessions have not only validated our choices but have also imbued our designs with insights drawn directly from affected users.

bar chart with 20 colors that include blues greens purples oranges pinks reds and neutrals

bar chart with 12 colors that include blues greens purples oranges a red and pink.

two vertical columns of 10 circles with the left column having the decided 10 colors and the right having their subtle counterparts

10 colors repeated on a bar chart, donut chart, histograph, line chart with fill, and stacked bar chart.

4 sets of a graphic with a different part of the donut chart highlighted for keyboard focus and each example has text to the reasoning for or against and any considerations with that output

Snip from a document on accessibility highlighting the things to think about with color and reflow and zoom when implementing a score card data viz.

Reflection and looking forward

Reflecting on the journey thus far, it's evident that creating accessible data visualizations is not a destination, but a process of continuous evolution and advocacy. I remain devoted to championing accessibility at every turn, ensuring every user can experience data with the clarity and understanding it deserves.

As many of the data visualizations NCR Voyix works on are dependent on dynamic data, alt text has not been considered as a means to meet accessibility. In the future, the hope is to work with computer imaging and large language models to dynamically update alt text so that important relationships presented in the visual are called out and updated for a screen reader user as quickly as they are updated in the graphic.