Accessibility
WCAG 2.2 AA, keyboard shortcuts and the patterns it follows.
On this page
The editor targets WCAG 2.2 AA, ATAG 2.0 and WAI-ARIA authoring practices, and is checked with axe-core on every release.
Keyboard shortcuts
| Shortcut | Action |
|---|---|
| AltF10 | Move focus to the toolbar |
| Esc | Return from the toolbar to the text |
| Alt0 | Open the list of keyboard shortcuts |
| Ctrl/⌘K | Insert or edit a link |
| Ctrl/⌘F | Find & replace |
| Ctrl/⌘B / I / U | Bold / italic / underline |
| Ctrl/⌘ShiftH | Highlight |
| Ctrl/⌘Alt1…6 / 0 | Heading 1 to 6 / paragraph |
| Ctrl/⌘Shift7 / 8 / 9 | Numbered, bulleted or task list |
Patterns it follows
- Toolbar. The ARIA toolbar pattern with one tab stop and a roving tabindex. Arrow keys, Home and End move between buttons, and the arrows follow the RTL direction. Buttons announce their pressed state and their shortcuts.
- Menus and dialogs. Menus follow the APG menu-button pattern. Dialogs are native
<dialog>elements with labelled fields, inline error messages and focus returned to where you were. - No keyboard trap. In the text, Tab indents lists and moves between table cells. Press Esc and then Tab to leave the editor.
- Announcements. Live regions announce results such as “2 of 5 matches” and “Link inserted”.
editor.announce()sends your own messages. - Visual accessibility. Focus is always visible. Windows High Contrast (
forced-colors) andprefers-reduced-motionare honored, and there is a dark theme. At narrow widths and 400% zoom the toolbar wraps instead of scrolling sideways. - Help for authors. Images prompt for alt text and offer a decorative option, tables get headers and a caption by default, and color pickers report contrast and warn below AA.
Name every editor
Give each editor an accessible name: a
<label for> on a textarea or <owe-editor>, or ariaLabel / ariaLabelledBy. Use ariaDescribedBy for help text, set contentLang for content in another language, and put lang and dir on the content you display from storage.