Accessibility

Every button and menu in 82editor works from the keyboard, and screen readers get button names and states. The accessibility checker finds problems in the post itself, such as images without alternative text.

createEditor('#editor', {
  toolbar: 'heading | bold | link image table | a11y help',
});

Accessibility checker

The toolbar item is a11y, in the ⋯ menu of the board and full presets. It looks through the current post and lists what it finds.

Clicking an item closes the dialog and scrolls to the spot; images get selected. With nothing to report it says "No issues found".

Keyboard

• One Tab reaches the toolbar. Inside it, ← → move between buttons and Home End jump to the first and last. Another Tab goes to the writing area.
• Shift+Tab from the writing area goes back to the toolbar, except in lists (outdent) and tables (previous cell).
• In a normal paragraph Tab moves on to the next field. In lists it indents, in tables it moves to the next cell, in code blocks it types two spaces.
• Opening a dropdown focuses its first entry. ↑ ↓ move, Enter picks, Esc closes and returns focus to the button.
• Dialogs (link, image, checker…) focus their first field and keep Tab inside. Esc closes them and returns focus to where it was.
• Ctrl+/ shows the shortcut list. All of them are in Keyboard shortcuts.

Screen readers

• The writing area is role="textbox" with aria-multiline="true", and placeholder is its name (aria-label). Say what the box is for.
• The toolbar is role="toolbar". Each icon button has a name in the UI language, and toggles such as bold report their state with aria-pressed.
• Buttons that open menus have aria-haspopup; the ⋯ button reports aria-expanded. Menu entries use role="menuitemradio" with aria-checked for the current choice.
• The character count, find results and notices are announced through aria-live="polite".

Accessible posts

Alternative text can be typed when inserting an image and changed later from the image bar. The table bar turns the first row into header cells (th). Running the checker before publishing is usually enough.

<p><img src="/files/map.png" alt="Map to our office"></p>
<table>
  <thead><tr><th>Name</th><th>Phone</th></tr></thead>
  <tbody><tr><td>Jane</td><td>555-0100</td></tr></tbody>
</table>

Options