Accessibility in Angular Chart component
1 Jul 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.