Accessibility

What you should do: name the editor

<script>
  import { NabuEditor, createDocumentEditor } from '@aionbuilders/nabu';

  const engine = createDocumentEditor();
</script>

<NabuEditor {engine} label="Chapter text" />

<!-- or, next to a visible label -->
<label id="body-label">Body</label>
<NabuEditor {engine} labelledby="body-label" />

Keyboard

• Typing and structure. Markdown shortcuts while typing (# , - , > ...), Enter to split a block, Backspace to merge, the arrow keys across blocks (the caret moves through the document as through one text).
• Marks. Mod-b, Mod-i, Mod-u, Mod-e, Mod-Shift-x. The floating toolbar is a pointer convenience for the same commands.
• Reordering blocks. The drag handle is for the pointer. The keyboard alternative is Mod-Shift-ArrowUp and Mod-Shift-ArrowDown (block:move-up, block:move-down).
• Undo and redo. Mod-z, Mod-Shift-z, Mod-y.
• To-dos and toggles. Mod-Enter toggles a to-do; the arrow of a toggle is a button with aria-expanded; the box of a to-do is a button with aria-pressed.
• Regions. Split, exit, merge, promote and demote have keys; the merges are protected by a hold that is announced (below).

Tab and the keyboard trap

import { createTextEditor, createDocumentEditor } from '@aionbuilders/nabu';

// A small editor lets Tab move the focus: no trap, nothing to announce.
const small = createTextEditor();
expect(small.tab).toBe('focus');
expect(small.tabDescription).toBeUndefined();

// A document editor keeps Tab: the way out is announced on the editor root (`aria-description`).
const document_ = createDocumentEditor();
expect(document_.tab).toBe('stay');
expect(document_.tabDescription).toBe('Press Escape then Tab to leave the editor');

// In your language, or removed.
expect(createDocumentEditor({ tabHint: 'Échap puis Tab pour sortir' }).tabDescription).toBe('Échap puis Tab pour sortir');
expect(createDocumentEditor({ tabHint: false }).tabDescription).toBeUndefined();

// The announcement follows the mode when it changes at runtime.
small.tab = 'indent';
expect(small.tabDescription).toBe('Press Escape then Tab to leave the editor');

What is exposed to assistive technology

Semantic elements

Region seams are headings

The live region: confirmations and holds

• a hold ("Hold Backspace to merge with Chapter 1"), which is also drawn on screen;
• an invite (press twice);
• a choose (the list of options and the chosen one);
• the outcomes the user asked for: a release, Escape, a timeout. Not a keystroke that simply goes on typing.

import { createFullEditor } from '@aionbuilders/nabu';

const engine = createFullEditor({
  commandConfirm: {
    holdMs: 1000, // a longer hold: friendlier to people who need more time
    messages: { hold: ({ keys, label }) => `Maintenez ${keys} : ${label}` }
  }
});

expect(engine.commandAnnouncement).toBe(''); // nothing pending: nothing announced
expect(engine.commands.get('region:merge-previous').confirm.strategy).toBe('hold');

The floating UI

• The toolbar is a role="toolbar" named "Text formatting"; its buttons are named (aria-label) and carry aria-pressed for the active marks. The icon of the link button is aria-hidden.
• The command chooser (the ::: chooser, the choice between actions) is a role="listbox" with role="option" items, aria-selected and aria-activedescendant. Focus stays in the editor while the listbox is driven by the arrow keys.
• The slash menu is a role="listbox" named "Insert block", with role="option" entries and aria-selected; entries of the same group (Text, Lists, Blocks, Media, Structure) sit in a role="group" named after it (nothing visible changes). Focus never leaves the editor, so the menu cannot rely on focus: while it is open the editor root carries aria-controls (the list) and aria-activedescendant (the active option), and a visually hidden polite live region says the active entry and its position ("Heading 1, Large heading, 2 of 15"), because screen readers do not all follow aria-activedescendant on an editable host. The name, the group names and the sentence are translatable with the messages prop of <SlashMenu>: { label, groups: { text: 'Texte' }, option: ({ title, subtitle, index, count }) => '...' }.
• The callout's icon button (it cycles the variant) has an aria-label ("Change callout type (note)"), not only a title; the language select of a code block has one too.
• The drag handle is a button named "Drag to reorder".

Placeholders and decoration

Read-only mode

Language

Colour contrast

The base theme

• Links. --nb-link is #0b57d0 on a light page (6.4:1 on white, 6.1:1 on #fafafa) and #8ab4f8 on a dark one (9.9:1 on #000, 7.9:1 on #1e1e1e, 6.7:1 on #2b2b2b): 4.5:1 or more on both. (It used to be #4d9fff, 2.7:1 on white.) Without the base theme the same two colours are the fallbacks, chosen by prefers-color-scheme. Check your own --nb-link against your page.
• A focus indicator. The editor element shows a 2 px ring in --nb-focus-ring on :focus-visible (WCAG 2.4.7 and 1.4.11): #0b57d0 on a light page, #8ab4f8 on a dark one, 3:1 or more against the page. It is drawn inside the box, so a clipping ancestor does not cut it. Set --nb-focus-ring (colour) and --nb-focus-ring-width to restyle it, or outline: none on .nabu-editor and draw your own. The Atelier theme keeps its own indicator, the stronger border of the pane.

The Atelier theme

Motion

Known limits

• Screen readers are not systematically tested. The attributes above are checked in Chromium by unit and browser tests (the accessible name, the editable region, heading exposure, the toolbar and listbox roles, the aria-description of the Tab hint), and the behaviours follow the platform. Real use with NVDA, JAWS, VoiceOver and Orca has not been audited.
• Mobile screen readers are untested (VoiceOver on iOS, TalkBack), as are mobile virtual keyboards: see Language and input methods.
• The slash menu's announcements are untested with real screen readers. The roles, aria-activedescendant and the live region are checked in Chromium; how NVDA, JAWS and VoiceOver voice them on a contenteditable host has not been audited.
• The drag handle is a pointer control; the keyboard path is the move commands above.
• The editor root carries translate="no": the browser's page translation does not apply to the editor's content.