Providing an Accessible Way To Navigate a Chart

August 28, 2022. Building inclusive and accessible data visualizations is challenging. No single approach will meet the needs of every user, but one way we can empower users is to provide alternative ways to navigate a chart using a keyboard. Here is how MCE can help you achieve that.

One way we can empower users is to provide alternative ways to navigate a chart using a keyboard.

Introduction – How Users Interact with a Chart

While a static chart like the one below serves a purpose, a user might want to interact with it to gather more insights about a specific data point. A lot of common interactions are usually done with a mouse device.

Using the mouse interaction along with the addition of MCE Hover Flag, works well for many users, but not all:

This doesn’t help for those who might want or can only use a keyboard. How can we offer the same experience for these users?

• Note: Read more about MCE Hover Flag in Building an Interactive Donut Chart by Matt Schragal.

Introducing the 'dataFocused' property

This property is supported for all plot types, making it possible to set focus on individual data points within a chart.

The flexibility of the dataFocused property allows you to:

• Set focus on one or more data points by default. For example, this can be useful when publishing articles or blog posts where you want to highlight a specific point.
• Set focus dynamically using mouse events.
• Navigate through data points using keyboard shortcuts or buttons.

So given the details, what if we add buttons for users to navigate through data points?

So, let’s review the code for the demo. We added a button container with a set of buttons:

<mds-button-container class="data-navigation"> 
    <mds-button 
        type="button" 
        variation="secondary" 
        size="small" 
        :disabled="focusDataIndex === -1 || focusDataIndex === 0 ? true : false" 
        @click="barPlotInteract('previous')" 
    > 
        Previous Data Point 
    </mds-button> 
    <mds-button 
        type="button" 
        variation="secondary" 
        size="small" 
        :disabled="focusDataIndex + 1 < plotData.length ? false : true" 
        @click="barPlotInteract('next')" 
    > 
        Next Data Point 
    </mds-button> 
    <mds-button 
        type="button" 
        variation="secondary" 
        size="small" 
        @click="resetData()" 
    > 
        Reset 
    </mds-button> 
</mds-button-container> 

Buttons are accessible by default. So it makes sense to leverage the power of native HTML and by doing so, you help fill the need for users of screen readers and keyboard shortcuts to navigate the data points of a chart.

A small sprinkling of appropriate ARIA magic like aria-live and a region role to the Hover Flag greatly assist screen reader users who might be interested in a specific set of data points:

<mce-hover-flag 
    v-if="isFlagVisible" 
    :x="hoverFlagPosition.pageX" 
    :y="hoverFlagPosition.pageY" 
    role="region" 
    aria-live="polite" 
>  
...

Users who either prefer to use a keyboard or are unable to use a mouse device can still use the visual affordance of the chart.

This example uses buttons to cycle through data points. Other solutions could be toggling between categories, adding a search/filter, or showing data points within a date range. The MDS Team is excited to see how the product teams at Morningstar leverage the dataFocused property!

If you have any questions or comments about this functionality, please do not hesitate to let us know!

Further Resources

• Implementing Accessible Data Charts by Sara Soueidan
• Accessibility Considerations for Charts, Graphs, and Infographics by Scott Vinkle
• ARIA live regions by MDN
• Introducing MDS Chart Elements by Jonathan Healy