Accessibility

Keyboard navigation, screen readers, reduced motion and touch support.

Echo Editor aims to meet WCAG 2.2 AA out of the box.

Keyboard

Keys	Action
`Tab`	Move focus into / out of the toolbar
`←` `→`	Move between toolbar controls
`Home` `End`	First / last toolbar control
`Esc`	Close menus, dialogs, find & replace, the AI menu
`Mod` + `B` / `I` / `U`	Bold / italic / underline
`Mod` + `Z`, `Mod` + `Shift` + `Z`	Undo / redo
`Mod` + `F`	Find & replace
`Mod` + `P`	Print
`F11`	Fullscreen
`/`	Slash menu (start of an empty line)

Shortcuts are exposed to assistive technology through aria-keyshortcuts.

The editable area is a labelled role="textbox" with aria-multiline. Set a meaningful name with the label prop.
The toolbar and bubble menus are role="toolbar" regions with names; every control has an accessible name, and toggles expose aria-pressed.
Popover buttons expose aria-haspopup / aria-expanded; dialogs trap focus and restore it on close.
Reaching the character limit is announced through a live region. Use announce() for your own messages:

import { announce } from 'vue-echo-editor'

announce('Document saved')
announce('Upload failed', 'assertive')

prefers-reduced-motion: reduce disables editor animations and smooth scrolling.
On coarse pointers, toolbar controls grow to 40 × 40 px, the toolbar scrolls horizontally, and the drag handle is hidden.
Fullscreen mode respects device safe areas (notches, home indicators).

Arabic sets dir="rtl" on the editor root; content direction follows the text.

On This Page