User Tools

Site Tools


accessibility:select

Select Lists, Comboboxes, and Autocomplete

The native HTML ''<datalist>'' element works well with screen readers, but (like <select>]], its options can’t be styled. The 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

accessibility/select.txt · Last modified: 2023/08/07 17:25 by scl

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki

© 2008-2022 GPLS and others. Evergreen is open source software, freely licensed under GNU GPLv2 or later.
The Evergreen Project is a U.S. 501(c)3 non-profit organization.