Charts accessibility

When working on a chart, you want to make sure everyone can see and understand it. This means creating charts with users with various disabilities and limitations in mind. We put together this short guide to help you get a better idea what accessibility is and how it’s implemented in Charts.

Accessibility is the practice of making a website usable by as many people as possible, including users with visual impairment. Many of them are using screen magnifiers and/or screen readers. A screen reader uses a Text-To-Speech (TTS) engine to turn information displayed on the screen into speech.

Readable chart elements

In Charts, some elements are always read by screen readers, but there are elements that are skipped as well. Skipping happens due to large number of elements, unusual placement of elements, and more.

Elements that are always read also differ depending on chart type – some chart types make it very hard to read elements successively or are not visible by screen readers because of a very large number of elements. In other words, an element read in one chart type might be skipped in another chart type.

We currently support three pathways:

1. Most chart types are read in their entirety (exceptions below) – screen reader will read title, description, alternative text, chart structure (read as: “Column chart with 2 series, New York, California”), points, source, and logo.
2. Only some elements are read – screen reader will read title, description, alternative text, structure, and logo in these chart types:
   – Dual axis
   – Bubble
   – Scatter
3. Line chart data values will not be read except when markers are enabled. Otherwise, screen readers will read only series names.

Skipped elements

Elements that are always skipped are:

• annotations
• tooltip
• axes titles
• legend (series are read as part of chart structure)
• interactivity (screen readers will ignore interactivity and will approach those charts as if interactivity was disabled)

Recommended settings for screen readers

NVDA

If you’re on Windows, we recommend using NVDA, a third-party app. Once downloaded, you’ll want to disable reading the keyword "clickable" with clickable elements:

1. Go to Preferences.
2. Click Document Formatting.
3. Select Elements.
4. Uncheck Clickable.

To turn off screenlayout which makes NVDA reads chart sections in wrong grouping, follow these steps:

1. Go to Preferences.
2. Click Keyboard options.
3. Enable Use Caps Lock as an NVDA modifier key.
4. Click OK.
5. Press Caps Lock + V on your keyboard.

VoiceOver

If you’re using a Mac, you’ll want VoiceOver to read only the important elements. Here’s how to make VoiceOver less cumbersome:

1. Go to System preferences.
2. Click Accessibility.
3. Select VoiceOver.
4. Open VoiceOver Utility.
5. Choose Verbosity from the left rail.
6. Set Default Speech Verbosity to Low.

   By setting Default Speech Verbosity to Low, VoiceOver will, for example, read just the name of the button, instead of reading the name, status, and type.