The Anatomy of an Accessible Auto-Suggest

Google first launched auto-suggest (aka Google Suggest) as a Google Labs project in 2004 saying it “… provides you with search suggestions, in real time, while you type”.

Since then, it’s become commonplace on the web and is used pretty much everywhere from social media sites like Twitter and Facebook, to shopping sites like eBay and Amazon, and even in occupation validation for credit card applications.

With auto-suggest plugins available for all the latest frameworks and libraries, implementation couldn’t be simpler.

But what about accessibility?

This talk will look at what makes an accessible auto-suggest. You’ll see examples that don’t work, and examples that do.

You’ll go through:

  • Required ARIA roles, states and properties
  • Keyboard access
  • Marking up the input field
  • Announcing the suggestions
  • Navigating to the suggestions list
  • Making a selection
  • Closing the suggestions list

You’ll leave with an understanding of how to make auto-suggest accessible – and some code to help you do it.

Every framework out there has an autocomplete, but very few are accessible.

 

Step 1: understand the requirements

 

Search field needs:

  • a label element
  • role=”combobox”
  • aria-autocomplete attr
  • aria-owns attr
  • aria-activedescendent attr

 

You need to manage the keyboard access: make sure you can use it with keyboard, that there are visible focus states, use arrow keys for moving through suggestions (highlight as you go). Press enter or right arrow to select an option and close the list; arrows should wrap inside the list; pressing esc should close the list and leave what’s been typed in the input.

 

Suggestions must be directly after the input field both visually and in code order; and if no suggestions are available, the list must not appear. The number of suggestions should be announced to screen readers.

 

List needs:

  • role=”listbox”
  • each suggestion has role=”option”
  • selected has aria-selected=”true”
  • (check full codepen)

 

Step 2: understand the code

 

(a walkthrough to see how all the pieces relate – if you are reading this later just go read the code :))

 

Used to announce info: #announce.visually-hidden[aria-live=”assertive”] (be really careful with aria-live!)

Demo

 

Adam ran video of a bad autocomplete and a good one – the difference is extreme, most implementations simply don’t announce the autosuggests, many will block the input.

 

Code: ademc.me/respond17

 

If you break it please tell Adam so he can fix it and share it!