Accessible WYSIWYG Editors: ARIA Toolbars, ContentEditable & Keyboard Shortcuts

Rich text editors (WYSIWYGs) powered by `contenteditable` (such as Tiptap, ProseMirror, Lexical, and TinyMCE) are central to content management systems, comment boards, and email composers. However, unoptimized editors leave screen reader users unaware of active formatting states and trap keyboard focus inside toolbars.

The Accessibility Hurdles of ContentEditable Editors

• Toolbar Tabbing Trap: Tabbing through 25 formatting buttons before reaching the writing canvas disrupts typing flow.
• Lost Text Selection: Clicking a toolbar button clears the active text highlight if focus is not returned programmatically.
• Silent Style Changes: Screen readers do not announce when text is switched from Paragraph to Heading 2 or Bulleted List.

The WAI-ARIA Toolbar Pattern

Formatting toolbars must use `role="toolbar"`. Inside a toolbar, standard Tab key navigation enters and exits the toolbar as a single unit, while Left/Right Arrow keys move between individual formatting buttons:

<div role="toolbar" aria-label="Text Formatting Toolbar" class="editor-toolbar">
  <button type="button" aria-label="Bold (Ctrl+B)" aria-pressed="false">B</button>
  <button type="button" aria-label="Italic (Ctrl+I)" aria-pressed="false">I</button>
  <button type="button" aria-label="Insert Link" aria-haspopup="dialog">🔗</button>
</div>

<div 
  contenteditable="true" 
  role="textbox" 
  aria-multiline="true" 
  aria-label="Article Body Content" 
  class="editor-canvas">
</div>

Keyboard Shortcuts & Selection Preservation

Support standard keyboard shortcuts (`Ctrl + B` for Bold, `Ctrl + I` for Italic, `Ctrl + K` for Links) directly inside the editing canvas so power users never have to leave the keyboard to format text.

Announcing Formatting States

Toggle `aria-pressed="true"` on toolbar buttons when the caret enters bold or italic text, allowing screen readers to announce: "Bold button, pressed".