- Keyboard navigation around the authoring tool generally via 'tab' (as per conventions)
- Tab order: logo -> user account drop-down -> title -> etc.
- Keyboard navigation through toolbar:
- Each item individually tab-able, OR
- Toolbar as a group tab-able, with arrow keys to navigate within items, OR
- Combination of each item individually tab-able + arrow keys to navigate between items (i.e., key redundancy: tab = right arrow, shift-tab = left arrow)
- On the toolbar:
- Arrow down or enter key activates drop-down menus for:
- Content structure (i.e., paragraph, headings, etc.)
- Table
- Arrow keys control grid dimensions
- Tab order: grid group -> x-dimension field -> y-dimension field -> create -> cancel -> next available item on
- Text colour
- Text highlight
- Arrow down or enter key activates drop-down menus for:
- Table of contents:
- Reorder elements via either:
- Tab-able drag handles + arrow keys to move, OR
- Modifier key + arrow keys to move (i.e., à la reorderer component)
- Tab-able to text edit field, and to delete/clear
- On 'enter' while editing a field:
- Focus to next empty field
- On 'delete' of element:
- Focus to next empty field
- Reorder elements via either:
- Keyboard shortcuts to:
- Toolbar
- Main editing area
- Hidden skip links to:
- Main editing area
- Within main content editing area:
- Our options for 'tab' are:
- Shift focus to outside content area ('return to top' link): unideal
- Indents text forward: unideal
- Focuses on next interactable element (absolute; e.g., move handle)
- Focuses on next interactable element (group; e.g., image, table, video), requiring further interaction for interacting with elemental elements
- Our options for 'tab' are:
- Give users better indications/expectations of keyboard experience:
- Tooltip/labels that appear the first time they use a potentially contentious keyboard shortcut (e.g., 'tab' in the content area)
- Persistent keyboard instructions (e.g., Flickr's unintrusive keyboard instructions at the bottom of photo pages):
- Keyboard shortcuts to toolbar and main content editing area
- Tab behaviour
- Oft used editing features (e.g., bold, italic, underline)
- Advanced keyboard instructions + hotkey customization? (e.g., Flickr advanced keyboard help modal dialog)
Page Comparison
Manage space
Manage content
Integrations