New to KendoReactStart a free 30-day trial

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. You can also enable the navigation by setting the navigable={true} prop of the component.

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 in 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-activedescendant attribute. This works in the same way for both SVG and Canvas render modes.

Change Theme
Theme
Loading ...

Available Shortcuts

When the legend area is focused, the following keyboard commands are available:

SHORTCUTDESCRIPTION
Right ArrowMoves focus to the next legend item. If we're already at the last item, focus cycles to the first item.
Left ArrowMoves focus to the previous legend item. If we're already at the first item, focus cycles to the last item.
Down ArrowMoves focus to the next legend item. If we're already at the last item, focus cycles to the first item.
Up ArrowMoves focus to the previous legend item. If we're already at the first item, focus cycles to the last item.
TabMoves 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 & TabMoves the focus to the chart area. If the legend position is top or left, moves focus to the previous focusable element on the page.

When the chart area is focused, the following keyboard commands are available:

SHORTCUTDESCRIPTION
Right ArrowMoves 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 ArrowMoves 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 ArrowMoves focus to the next series.
Up ArrowMoves focus to the previous series.
TabMoves 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 & TabMoves the focus to the previous focusable element on the page. If legend position is top or left, moves focus to the legend area.
In this article
Basic ConceptsAvailable ShortcutsSuggested Links
Not finding the help you need?
Contact Support