Creating an accessible autocomplete

westbrookc16

Chris Westbrook

Posted on July 29, 2021

Creating an accessible autocomplete

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:

  1. Ensure the correct aria is present on your input and results list. These include:
  2. 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.
  3. aria-expanded: set this attribute to true when list items are shown.

  4. aria-controls: set to the ID of the ul that contains the results.

  5. aria-haspopup=listbox and aria-autocomplete=list on the input control.

  6. 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

💖 💪 🙅 🚩
westbrookc16
Chris Westbrook

Posted on July 29, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related