How can I help you?
Accessibility in React Chart component
3 Feb 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 followed the WAI-ARIA patterns to meet the accessibility. The following ARIA attributes are used in the Chart component:
- img (role)
- button (role)
- region (role)
- 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 data point left side from the selected point. |
| Up Arrow | Moves the focus to the data point right side from the selected point. |
| Left Arrow | Moves the focus to the next series in the chart. |
| Right Arrow | Moves the focus to the previous series in the chart. |
| ESC | Cancel the tooltip for the data point. |
| Enter/Space | Selects the data point in the series. |
| Down/Left Arrow | Moves the focus to the legend left side from the selected legend. |
| Up/Right Arrow | Moves the focus to the legend right side from the selected legend. |
| Enter/Space | 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.