Keyboard Accessibility
This tutorial introduces how to control charts with the keyboardNavigating Charts on the Keyboard
Users can navigate through the chart using the computer arrow keys. If a screen reader is enabled, this will describe the contents of the chart, such as the x-axis, y-axis, and data points.
General Chart Keys
| Name | Keys | Description |
|---|---|---|
| Move Between Areas | Page Up | Page up: moves from legend to y-axis to x-axis. If missing a feature, just skips it and moves onto the next. Does not loop, so returns to overview after x-axis. |
| Move Between Areas | Page Down | Page down: moves from x-axis to y-axis to legend. If missing a feature, just skips it and moves onto the next. Does not loop, so won't move past legend. |
| Chart Data Access | Tab | Move from anywhere in the graph to the main chart area, allowing access to specific data. |
| Return to Overview | Shift + Tab | Return to overview from anywhere in the chart. |
| Zoom in | Enter | Move to the first data point or subgroup in the chart, or first data point in subgroup. |
| Zoom Out | Shift + Enter | Without subgroups or from subgroup overview: move to general chart data area. Within subgroups: move to subgroup overview. |
| Multi-Chart Movement | Up Arrow Key | Down the list of charts. |
| Multi-Chart Movement | Down Arrow Key | Up the list of charts. |
| Multi-Chart Movement | Left Arrow Key | Up the list of charts. |
| Multi-Chart Movement | Right Arrow Key | Down the list of charts. |
Box and Violin Plot Keys
| Name | Keys | Description |
|---|---|---|
| Move Through Specifics | Up Arrow Key | Minimum to maximum movement. Full list of data: Minimum, interquartile range, first quartile, median, third quartile, maximum, outliers. |
| Move Through Specifics | Down Arrow Key | Maximum to minimum movement. Full list of data: Minimum, interquartile range, first quartile, median, third quartile, maximum, outliers. |
| Move Through Specifics | Left Arrow Key | Maximum to minimum movement. Full list of data: Minimum, interquartile range, first quartile, median, third quartile, maximum, outliers. |
| Move Through Specifics | Right Arrow Key | Minimum to maximum movement. Full list of data: Minimum, interquartile range, first quartile, median, third quartile, maximum, outliers. |
Histogram and Pie Chart Keys
| Name | Keys | Description |
|---|---|---|
| X-Axis Movement | Up Arrow Key | Move towards origin. |
| X-Axis Movement | Down Arrow Key | Move away from origin. |
| X-Axis Movement | Left Arrow Key | Move away from origin. |
| X-Axis Movement | Right Arrow Key | Move towards origin. |
| Value Movement | Page Up | Towards largest value point movement. |
| Value Movement | Page Down | Towards smallest valued point movement. |
Bar Chart, Line Chart, and Scatter Plot Keys
| Name | Keys | Description |
|---|---|---|
| X-Axis Movement | Up Arrow Key | Move towards origin. |
| X-Axis Movement | Down Arrow Key | Move away from origin. |
| X-Axis Movement | Left Arrow Key | Move away from origin. |
| X-Axis Movement | Right Arrow Key | Move towards origin. |
| Value Movement | Page Up | Towards smallest valued point movement. |
| Value Movement | Page Down | Towards smallest valued point movement. |
| Subgroup to Data Points | Enter | Move to specific data within a subgroup from the subgroup list. |
Accessible Data by Chart Type
| Chart Type | Value Data Provided |
|---|---|
| Bar Chart | Bar values, subgroup overview. |
| Histogram | Bin values. |
| Pie Chart | Slice values. |
| Scatter Plot | Data point values, subgroup overview. |
| Line Chart | Data point values, line overview. |
| Box Plot | Minimum, interquartile range, first quartile, median, third quartile, maximum, outliers. |
| Violin Plot | Minimum, interquartile range, first quartile, median, third quartile, maximum. |
Try it Yourself!
Press the blue run button to execute the code in the code editor. Press the red stop button to end the program. Your program will work when the console outputs "Build Successful!"
This runnable example demonstrates how to use the accessibility features with charts. Note that we must have screen reader enabled to go through all the individial parts of the chart.
For this example, the data may not make sense to the chart type. However, we will be discussing what makes a good chart in the next section.
Next Tutorial
In the next tutorial, we will discuss Good Charts, which describes how to make good charts as a data scientist.