Accessibility in Vue Chart component
3 Mar 20231 minute to read
Accessibility is achieved in the chart control through WAI-ARIA standard and keyboard navigation. The chart features can be effectively accessed through assistive technologies such as screen readers.
The following ARIA attributes are used in the chart:
||Reads the series name
||Reads the chart's title
||Reads the Point x : Point y value
## Keyboard navigation
All the chart actions can be controlled via keyboard keys. The applicable key combinations and their relative functionalities are listed below.
Interaction Keys |Description
Tab |Moves the focus to the next element in the chart.
Shift + Tab |Moves the focus to the previous element in the chart.
DownArrow |Moves the focus to the data point left side from the selected point.
UpArrow |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 |Print the chart.
||Reads the series type with data points