Accessibility

viveEditor targets WCAG 2.2 AA: every tool works from the keyboard, status changes are announced to screen readers, and the editor helps writers describe their images. This page lists what the editor does and the few things you still need to provide, such as a label.

How it is tested

Every test page, every panel and both themes are checked with axe against WCAG 2.2 AA; a failure blocks the build. The / menu and the suggestion lists keep the focus in the text while you pick an option, following the combobox pattern, and a keyboard test proves that every option can be reached.

Give the editor a name

Screen readers need a name for the editing area. Pass label everywhere you create an editor:

import { mountEditor } from 'viveeditor'

mountEditor(document.querySelector('#editor'), { label: 'Article body' })

The components take the same label prop, and <vive-editor> takes a label attribute. With a textarea, keep a visible <label for> that points at it; the editor uses that text when you pass no label.

Set locale too, or a correct <html lang="...">, so the toolbar names and messages are read in the page’s language. The interface has Turkish and English text.

Keyboard

Keys	What they do
Alt+F10	Move the focus from the text to the toolbar
Ctrl+K	Open the link panel
Ctrl+F	Open find and replace
/	Open the block menu
Esc	Close the selection bubble or a loading panel
Tab / Shift+Tab	Change the level of a list item
Tab	In a table, move to the next cell
Ctrl+Enter	Tick a checklist item
Ctrl+Shift+L, E, R, J	Align left, centre, right or justify
Ctrl+J	Open the AI assistant, when you added it

On a Mac, use ⌘ where the table says Ctrl. Markdown shortcuts also work while typing, such as ## for a heading, - for a list or [ ] for a checklist. The full list is on Toolbar and shortcuts.

What screen readers hear

• File menu progress is announced through a role="status" region, and errors appear in a visible role="alert" notice.
• While a panel loads, a placeholder with role="status" sits in its place. If it fails, a message with a Try again button replaces it.
• When a form waits for uploads, a notice with role="status" says it will send, and the editor is marked aria-busy.
• When a required editor is empty on submit, the editor is marked aria-invalid="true", takes the focus and fires a vive:invalid event that you can use to show your own message.

Images and alt text

The image panel asks for alt text, with the hint “Briefly describe the image for people who cannot see it”. A writer can also mark an image as decorative.

• In the saved document, alt: null means the description is missing and alt: '' means the image is decorative.
• The requireAlt option of Image ('off', 'warn' or 'block') sets how the alt-text reminder behaves.
• The imagesWithoutAlt query lists the images that still need a description, for example before you publish.

Colours and layout

• Light, dark and auto themes are available. In the dark theme, text colours chosen by the writer are lifted on screen so they stay readable; the saved HTML keeps the stored colour.
• On narrow screens, below 560 px, most tools move into the “More tools” menu.
• Pages that show the content should add img { max-width: 100%; height: auto; } so images fit small screens.

Readability meter

The interface includes a readability meter that shows words, sentences, average sentence length, reading time and a readability score. The score uses the Ateşman or the Flesch formula; set it with readability: 'atesman' or readability: 'flesch' in createUI, or hide the meter with readability: false.