Accessible jQuery-ui Components

Example 1

Example 2


(use “Kro” to see some suggestions)

Keyboard Interaction

  • UP and DOWN: Cycles through auto-suggestions and input field.
  • ESC: Close the menu
  • ENTER: Select the currently focused auto-suggestion and close the menu.
  • TAB: Select the currently focused auto-suggestion, close the menu, and move focus to the next focusable element.

Screen-reader Interaction

  • when the search field gains focus an initial instruction is announced.
  • when search results are returned the count and instructions are announced.
  • when suggestions are arrowed through they are spoken aloud.

Aria

  • input: aria-describedby=”initInstr” aria-owns=”results” aria-expanded=”false” aria-autocomplete=”both” aria-activedescendant=””
  • ul: id=”results” role=”listbox”
  • li: id=”” role=”option” aria-selected=”false”