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.2 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.

Activating the focused item

Charts can trigger their click callbacks from the keyboard, so mouse-only interactions such as drill-down or filtering stay available to keyboard users (WCAG 2.1 SC 2.1.1).

It is opt-in on every chart, so existing callbacks keep receiving pointer events only:

<BarChart
  experimentalFeatures={{ keyboardActivation: true }}
  onItemClick={(event, item) => {}}
  {...otherProps}
/>

Pressing Enter or Space on the focused item then calls onItemClick with the same payload a click provides.

The event argument is the KeyboardEvent that triggered the activation. The callback types keep describing the pointer event to avoid a breaking change, so opt into the wider type with a module augmentation:

import type {} from '@mui/x-charts/moduleAugmentation/keyboardActivation';

The click callbacks then receive MouseEvent | KeyboardEvent, and you can narrow with event instanceof KeyboardEvent before reading pointer-only properties such as clientX. Both become the default in v10.

When a chart exposes several item callbacks, activation fires the one a pointer would reach first on the focused data point: line charts try onMarkClick, then onLineClick, then onAreaClick; radar charts try onMarkClick, then onAreaClick; and Sankey charts call onNodeClick or onLinkClick depending on the focused element. Only one of them fires.

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';