This is an accessible autocomplete which works with keyboard, screen readers, switch devices, and touch screens.
This solution is written in jQuery using fake data. Future TODOs: 1) write in vanilla JS 2) instantiation.
NOTE: type any letter to get 6 results. Any 2 letters gives you 3 results; 3 letters gives you 1 result.
It's up to you to set mobile style handling but here's an example .
- 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.
- 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.
- 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"