Keyboard Navigation
The Chart comes with keyboard navigation enabled out of the box. The main interactive parts of the Chart are reachable through the keyboard - the Chart area and Legend area.
For a runnable example, refer to the demo on using the keyboard navigation of the Grid.
Basic Concepts
Once the element receives focus, there will be two main focusable areas the user can be in - the main chart area and the legend (if one is present). Moving focus between the chart area and legend area is done with the Tab and Shift & Tab keys. Once focus is in one of the two areas, the user can navigate through the items using the arrow keys.
The only focusable element of the Chart is the main wrapper element itself. Focusing individual points or legend items is implemented through the
aria-activedescendantattribute. This works in the same way for bothSVGandCanvasrender modes.
Available Shortcuts
When the chart area is focused, the following keyboard commands are available:
| SHORTCUT | DESCRIPTION |
|---|---|
Right Arrow |
Moves focus to the next point in the series. If focus is on the last point of the series, moves focus to the first point of the next series. |
Left Arrow |
Moves focus to the previous point in the series. If focus is on the first point of the series, moves focus to the last point of the previous series. |
Down Arrow |
Moves focus to the next series. |
Up Arrow |
Moves focus to the previous series. |
Tab |
Moves the focus to the legend area. If the legend is not visible, or if legend position is top or left, moves focus to the next focusable element on the page. |
Shift & Tab
|
Moves the focus to the previous focusable element on the page. If legend position is top or left, moves focus to the legend area. |
When the legend area is focused, the following keyboard commands are available:
| SHORTCUT | DESCRIPTION |
|---|---|
Right Arrow |
Moves focus to the next legend item. If we're already at the last item, focus cycles to the first item. |
Left Arrow |
Moves focus to the previous legend item. If we're already at the first item, focus cycles to the last item. |
Down Arrow |
Moves focus to the next legend item. If we're already at the last item, focus cycles to the first item. |
Up Arrow |
Moves focus to the previous legend item. If we're already at the first item, focus cycles to the last item. |
Tab |
Moves the focus to the next focusable element on the page. If the legend position is top or left, moves focus to the chart area. |
Shift & Tab
|
Moves the focus to the chart area. If the legend position is top or left, moves focus to the previous focusable element on the page. |