WebAIM - Web Accessibility In Mind

E-mail List Archives

Examples of comboboxes supporting multiple selected options

for

From: Sean Curtis
Date: Jan 30, 2018 3:35PM

I've found many examples of accessible autocompletes, some single-choice
combobox components, but I've yet to find one that handles multiple
selected options. I'm trying to work out the best pattern for interacting
with selected values. Often they appear as a bunch of lozenges beside the
input field, with little "X" buttons to clear the values. This is a pattern
used often in address fields when composing an email.

I've looked at the one used by Gmail, and iCloud mail, but while they do
highlight a selected option visually when hitting left/right with the
keyboard, that selection is not announced to a screen reader.

Ideally they wouldn't be a focusable element as it'd make tabbing through a
form exhausting. Is using left/right (and aria-activedescendant) to
highlight currently selected values, and up/down to open and navigate
additional, as-yet-unselected options a decent compromise?

Are there any good examples around that I've just missed?

Cheers,

Sean