Accessible Autocomplete
View the full library of accessibility solutions.
This is an accessible autocomplete which works with keyboard, screen readers, switch devices, and touch screens.
Example
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 .
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"