Accessible jQuery-ui Components

Example 1

CodeX

Example 2

Choose a beer:

(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”