(Floe) OER Commons authoring tool keyboard access considerations
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
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
Keyboard shortcuts to:
Toolbar
Main editing area
Hidden skip links to:
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
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)
{"serverDuration": 13, "requestCorrelationId": "d1493e0600c64d7dabdb877c5b5da86d"}