Keyboard and accessibility
Everything in the chart and the UI shell can be reached and used from the keyboard. This page is the key map; the chart's screen-reader support is described with the rest of its input.
Moving around the shell
The shell has up to five areas: the toolbar, the rail, the chart, the navigator and the bottom bar. Each bar is a single Tab stop, so Tab goes from area to area rather than through every button, and the arrow keys move inside a bar.
| Key | Where | Action |
|---|---|---|
| Tab / Shift+Tab | Anywhere | Next / previous area, field or slider |
| F6 / Shift+F6 | Anywhere in the shell | Focus the next / previous area, skipping hidden ones (the focus-next-region and focus-previous-region actions) |
| ← → ↑ ↓ | Toolbar, rail, bottom bar | Previous / next button, wrapping at the ends |
| Home / End | Toolbar, rail, bottom bar | First / last button |
| Enter or Space | A button | Press it |
| Shift+Enter | A drawing tool in the rail | Arm the tool and keep it after each drawing |
The chart shows a focus ring while keyboard navigation has put focus on it: the ring appears once Tab or F6 is pressed and hides again after a pointer press. Shortcuts and Escape do not show it, so focus handed back to the chart when a dialog or panel closes shows no ring.
A bar remembers the button you last used, so coming back with Tab or F6 lands on it. Fields and sliders inside a bar (the go-to-date form, controls an app puts in a toolbar) keep their own Tab stops and arrow keys.
F6 works while focus is anywhere in the shell, including the chart, and does nothing while a modal dialog is open. Like any action, it can be rebound or turned off:
shell.chart.actions.setKeys('focus-next-region', ['Alt+F6']);Menus
| Key | Action |
|---|---|
| Enter or Space on a menu button | Open the menu and focus its selected entry, or the first one |
| ↓ / ↑ | Next / previous entry, wrapping at the ends |
| Home / End | First / last entry |
| Enter or Space | Pick the entry |
| Escape | Close the menu and focus its button again |
The chart's context menu opens from the focused chart with the Menu key or Shift+F10.
The chart
With the chart focused, the arrow, Page and Home/End keys move the view, + and - zoom, and the drawing keys edit the selection: see the full table under keyboard. Typing a letter or digit opens the symbol search.
Shortcuts
| Key | Action |
|---|---|
| Ctrl/Cmd+K | Command palette (command-palette) |
| / | Symbol search (symbol-search; also Ctrl/Cmd+K in a shell without the command palette) |
| / | Indicator picker, with the chart focused or hovered, in a shell without a symbol search (indicator-picker) |
| Shift+End | Reset the view (reset-view) |
| Ctrl/Cmd+Z, Ctrl/Cmd+Shift+Z | Undo, redo a drawing change |
Every shortcut is an action on chart.actions, so an app can list the shortcuts in effect for its own help screen, including any the user rebound:
for (const { label, keys } of shell.chart.actions.list()) if (keys.length > 0) addRow(label, keys.join(', '));Other controls
- Navigator: the window and both edges are sliders; see navigator.
- Data window: the arrow keys step through the bars.
- Object tree, dialogs and pickers: see object tree, form and picker dialogs and symbol search.
Screen readers and contrast
The chart describes what is in view, can read the crosshair values and announce new bars, and can show its data as a table; see screen readers. The shell's bars are toolbars with names, its menus are menus or list boxes, and toggles report whether they are pressed.
Automated tests check WCAG AA contrast for the built-in dark, light and high-contrast themes: 4.5:1 for text in the chart and the shell chrome, and 3:1 for the focus ring. If you change the colours with the --pc-* tokens (see theming), check those pairs again.