Sample Keystrokes

In all of the above cases, each item must be placed appropriately in the tab order (typically via tabindex='0'), as should all relevant child elements. This should occur only when the item is available for interaction. When items are no longer able to be acted upon, they should be taken out of the tab order, either by removing tabindex or setting its value to '-1'.
Widget Keystrokes
  • Tab moves focus into the combobox. 2nd tab moves focus out
  • Alt Down Arrow and/ or Space opens the combobox and moves focus to the selected option (or first item, if none selected)
  • Up and Down Arrow traverses the list of options
  • Enter selects the current item, updates the relevant field
  • Escape closes the list & does not change selection
  • Typing a letter moves focus to the next instance whose option label begins with that letter
  • spacebar or enter key activates the action triggered by the button
  • If activating button launches new content or closes content, focus moves to the next logical item
  • else, focus stays on button
  • Two-state checkbox (checked/ unchecked):
    • Spacebar toggles selection
  • Tri-state checkbox (checked/ unchecked/ mixed)
    • if not checked: spacebar checks the box
      • If child elements exist: all children checked
    • if checked: spacebar unchecks the checkbox
      • If child elements exist: all child elements unchecked
    • if 'mixed': spacebar unchecks the checkbox
      • If child elements exist, all thild elements unchecked
Radio Button
  • Tab key enters the radio group
  • Down/ Right moves forward in the group
    • When at the end of the group, wraps back to beginning
  • Up/ Left arrow moves backward in the group
    • When at the beginning of the group, wraps to end of set
  • Space bar toggles selection
  • Ctrl + arrow (Down/ Right, Up/ Arrow) cycles through options without updating content or selecting button
  • Spacebar or enter key activates the link
Modal Dialog
  • Enter if dialog holds a form should submit the form
  • Escape closes the dialog (unless some other item which has focus has an event bound to it that responds to the escape key)
  • Tab/ Shift+tab cycles between all tabbable items in the dialog only
  • "Modalism". The only thing the user can interact with when the dialog is open is the dialog itself. "Parent" area of the document cannot be clicked, nothing underneath can gain focus via tab/ shift+tab
  • When dialog is opened, focus is taken to first logical item in the dialog.
  • When dialog is closed, focus returns to item which invoked it
  • Tab moves focus to first actionable button in meny
    • Tabbing a second time moves focus out of toolbar
  • Left Arrow, Right Arrow traverses forward & backward between other options in toolbar
  • Disabled options
    • Typically are not discoverable until they become enabled (possibly by some other action).
    • If they're disabled but gain focus, should be read as disabled.