Charts - 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

The keyboard navigation is enabled by default on all charts. You can disable it by setting disableKeyboardNavigation to true. You can also disable it globally using theme default props

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

This feature is currently supported by the following charts: line, bar, pie, scatter, sparkline, funnel, radar, heatmap, sankey, and range bar.

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

Screen reader compatibility

Charts use a proxy strategy to support screen reader when user navigate with keyboard navigation.

The description of the focused element is localized. You can customize it by using localization key. The [type]Description localization keys are functions for a given series type, for example, pieDescription for pie charts. These functions receives values related to the focused item, and should return the description to display.

Composition

The focus highlight is done with a dedicated SVG element. When using composition, you've to add this component to make the focus visible.

Each series type has its own component:

import { FocusedBar } from '@mui/x-charts/BarChart';
import { FocusedPieArc } from '@mui/x-charts/PieChart';
import { FocusedLineMark } from '@mui/x-charts/LineChart';
import { FocusedScatterMark } from '@mui/x-charts/ScatterChart';
import { FocusedRadarMark } from '@mui/x-charts/RadarChart';
import { FocusedHeatmapCell } from '@mui/x-charts-pro/Heatmap';
import { FocusedFunnelSection } from '@mui/x-charts-pro/FunnelChart';
import { FocusedSankeyLink, FocusedSankeyNode } from '@mui/x-charts-pro/SankeyChart';