Accessibility

Learn how the Charts implement accessibility features and guidelines, including keyboard navigation that follows international standards.

Guidelines

Common conformance guidelines for accessibility include:

• Globally accepted standard: WCAG
• US:
  • ADA - US Department of Justice
  • Section 508 - US federal agencies
• Europe: EAA (European Accessibility Act)

WCAG 2.1 has three levels of conformance: A, AA, and AAA. Level AA exceeds the basic criteria for accessibility and is a common target for most organizations, so this is what this library aims to support.

The WAI-ARIA Authoring Practices includes examples on Tooltip.

Animation

Some charts have animations when rendering or when data updates. For users with vestibular motion disorders those animations can be problematic. By default animations are toggled based on the prefers-reduced-motion media feature.

Keyboard support

Set enableKeyboardNavigation to true to enable the keyboard navigation on your charts. You can also enable it globally using theme default props

components: {
  MuiChartDataProvider: {
    defaultProps: {
      enableKeyboardNavigation: true
    },
  },
}

This feature is currently supported by line, bar, pie, scatter, and sparkline charts.

This makes the SVG component focusable thanks to tabIndex. When focused, the chart highlights a value item that can be modified with arrow navigation.