Accessible Autosuggest

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: Close the menu, leave what the user has typed in the textbox and move focus to the next focusable element.

Screen-reader Interaction

• when search results are returned the count and instructions are announced.
• when suggestions are arrowed through they are announced.

ARIA

• div: role="combobox" aria-owns="res" aria-expanded="false" aria-haspopup="listbox"
• input: aria-autocomplete="list" aria-controls="res" aria-describedby="tip" aria-activedescendant="suggestion-#"
• div: id="res" role="listbox"
• div: id="suggestion-#" role="option" aria-selected="false"

Notes

• This code has been updated in line with theARIA 1.1 combobox design pattern
• This is a modified version @dennisl's Accessible Autosuggest Dropdown which was a modification of Intopia's original accessible auto suggest