Accessibility in React Chart
25 Aug 20263 minutes to read
The Chart component follows the accessibility guidelines and standards, including ADA, Section 508, WCAG 2.2, and relevant WAI-ARIA roles.
The Chart component’s accessibility compliance is outlined below.
| Accessibility Criteria | Compatibility |
|---|---|
| WCAG 2.2 Support |  |
| Section 508 Support | |
| Screen Reader Support | |
| Right-To-Left Support | |
| Color Contrast | |
| Mobile Device Support | |
| Keyboard Navigation Support | |
| Accessibility Checker Validation | |
| Axe-core Accessibility Validation | |
- All features of the component meet the requirement.
- Some features of the component do not meet the requirement.
- The component does not meet the requirement.WAI-ARIA attributes
The Chart component follows the WAI-ARIA patterns to meet the accessibility requirements. The following ARIA attributes are used in the Chart component:
Roles:
- img (role)
- button (role)
- region (role)
Attributes:
- aria-label (attribute)
- aria-hidden (attribute)
- aria-pressed (attribute)
Keyboard interaction
The Chart component follows the keyboard interaction guidelines, making it easier for assistive technology users and keyboard-only users to navigate the chart. The following keyboard shortcuts are supported by the Chart component.
| Press | To do this |
| — | — |
| Alt + J | Moves the focus to the chart element. |
| Tab | Moves the focus to the next element in the chart. |
| Shift + Tab | Moves the focus to the previous element in the chart. |
| Down Arrow | Moves the focus to the next data point from the selected point. |
| Up Arrow | Moves the focus to the previous data point from the selected point. |
| Left Arrow | Moves the focus to the previous series in the chart. |
| Right Arrow | Moves the focus to the next series in the chart. |
| ESC | Cancels the tooltip for the data point. |
| Enter/Space | Selects the data point in the series. |
| Down/Left Arrow | When a legend item is focused, moves the focus to the previous legend item. |
| Up/Right Arrow | When a legend item is focused, moves the focus to the next legend item. |
| Enter/Space | When a legend item is focused, toggles the visibility of the corresponding series. |
| Ctrl + + | Zoom in the chart. |
| Ctrl + - | Zoom out the chart. |
| Down/Up Arrow | Pan the chart vertically. |
| Left/Right Arrow | Pan the chart horizontally. |
| R | Reset the zoomed chart. |
| Ctrl + P | Prints the Chart. |
Ensuring accessibility
The Chart component’s accessibility levels are ensured through an accessibility-checker and axe-core software tools during automated testing.
The accessibility compliance of the Chart component is shown in the following sample. Open the sample in a new window to evaluate the accessibility of the Chart component with accessibility tools.