/
(Floe) OER Commons authoring tool keyboard access considerations

(Floe) OER Commons authoring tool keyboard access considerations

Dec 20, 2012

  • 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)