(Floe) OER Commons authoring tool keyboard access considerations

Owned by James Yoon
Last updated: Dec 20, 2012 by Joanna VassVersion comment
2 min read
  • 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:
    • 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
  • 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)