How can I help you?
Accessibility in Angular Chart component
13 Mar 20266 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 accessibility requirements. The following ARIA roles and attributes are used by the Chart component:
role="img"role="button"role="region"aria-labelaria-hiddenaria-pressed
Keyboard interaction
The Chart component follows keyboard interaction guidelines to improve accessibility for assistive-technology and keyboard-only users. Below the shortcuts are grouped by context (mode) so it’s clear which keys apply where.
General navigation
| Press | Action |
|---|---|
| Alt + J | Moves focus to the chart container (first focusable chart element such as the first series/point or legend). |
| Tab | Moves focus to the next focusable element within the chart. |
| Shift + Tab | Moves focus to the previous focusable element within the chart. |
| Enter / Space | Activates or selects the focused element (for example, toggles a legend item or selects a data point). |
| Esc | Closes tooltips or modal overlays (if open). |
Series / Data-point navigation
| Press | Action |
|---|---|
| Left Arrow | Moves focus to the previous data point in the active series. |
| Right Arrow | Moves focus to the next data point in the active series. |
| Up Arrow | Moves focus to the data point above (previous in vertical order) when applicable. |
| Down Arrow | Moves focus to the data point below (next in vertical order) when applicable. |
| Enter / Space | Selects the focused data point. |
Legend focus mode
(To focus the legend, press Tab until the legend receives focus, or use keyboard navigation to move into legend items.)
| Press | Action |
|---|---|
| Left Arrow | Move legend focus to the previous legend item. |
| Right Arrow | Move legend focus to the next legend item. |
| Up Arrow | Move legend focus up one item (if legend is vertical). |
| Down Arrow | Move legend focus down one item (if legend is vertical). |
| Enter / Space | Toggles visibility of the focused series (show/hide). |
Zoom / Pan mode
(Enable zooming/panning in the chart configuration to use these shortcuts.)
| Press | Action |
|---|---|
| Ctrl + + | Zoom in the chart. |
| Ctrl + - | Zoom out the chart. |
| Left / Right Arrow | Pan the chart horizontally when pan is enabled. |
| Up / Down Arrow | Pan the chart vertically when pan is enabled. |
| R | Reset the zoom/pan to the default view. |
Notes and clarifications
- The meaning of arrow keys depends on the current focus and mode: when the legend is focused, arrow keys move between legend items; when a data point or series is focused, arrow keys move between points/series; when pan/zoom is enabled and active, arrow keys pan the chart.
- Use Alt + J to quickly focus the chart container — from there use Tab or arrow keys to reach legend or data points.
- The table below shows the keys commonly supported; behavior can vary slightly depending on chart configuration (for example, stacked vs. grouped series) and platform.
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.