====== Select Lists, Comboboxes, and Autocomplete ======

The native [[https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist|HTML ''<datalist>'' element]] works well with screen readers, but (like ''<select>'']], its options can’t be styled. The [[https://open-ui.org/|Open UI group]] is advocating with browser developers to open up more browser elements for CSS styling. In the meantime, we need to make our replacement components as accessible as possible.

Some common issues with autocomplete widgets (including Bootstrap 3's) include:

  * missing labels, or incorrect aria-labels, rendering the entire box inaccessible to screen reader users
  * failing to announce autocomplete options
  * announcing only part of an autocomplete option (for example, only the highlighted matching part)
  * failing to allow options to be selected via keyboard

**Further reading on select lists, comboboxes, and autocomplete widgets**

  * [[https://sarahmhigley.com/writing/select-your-poison/|''<select>'' Your Poison, Sarah Higley]]
  * [[https://github.blog/2022-12-13-creating-an-accessible-search-experience-with-the-querybuilder-component/|Creating an accessible search experience with the QueryBuilder component @ GitHub, Lindsey Wild]]
  * [[https://github.com/alphagov/accessible-autocomplete|alphagov accessible autocomplete]]