I am a blind web developer who happens to work for a great company that tests websites for accessibility called Accessible 360. I thought I would attempt to write a helpful post on making your autocomplete controls accessible.
Let's get started:
- Ensure the correct aria is present on your input and results list. These include:
- Most important, aria-activedescendent property When an item is selected with the arrow keys, the ID of that list item should be set in the aria-activedescendent property. So this property should change with each new selection that is made as the user arrows through the suggestions.
aria-expanded: set this attribute to true when list items are shown.
aria-controls: set to the ID of the ul that contains the results.
aria-haspopup=listbox and aria-autocomplete=list on the input control.
The ul containing the results must be set to a role of listbox. IN addition, each li within the ul must have a role of option and an ID to match to aria-activedescentent property of the input.
Optionally, an aria-describedby attribute should be present on the input pointing to the id of a div/span with instructions, such as start typing and arrow down to see results, etc.
I hope this article helps someone. I made a code sandbox with a simple accessible autocomplete in react that can be found at
https://codesandbox.io/s/objective-chatelet-ikr7k?file=/src/App.js
Top comments (0)