WebAIM - Web Accessibility In Mind

E-mail List Archives

multi-select combobox - best practice

for

From: Sonja Weckenmann
Date: Oct 13, 2022 6:18AM

Hi,

With regard to multi-selects I am aware that a group of checkboxes is to
be preferred. However, there may be reasons for custom multi-selects and
I wonder what would be best practice.

Often the selected options are additionally offered as buttons with and
"x" Icon that indicates "remove". Usually these buttons are visually
positioned within or above the input.

There is a good code example by Sarah Higley on this
(https://codepen.io/smhigley/pen/gObMVzv), but I wonder about the
following questions:

1. Should users be informed that multiple selection is possible, and if
so, in what way? By using aria-describedby on the input element?

2. Is it OK to place the buttons above the input? For non-visual users
this order is probably not easy to understand? Would it be better to
differ the visual order and the DOM order positioning the buttons after
the widget and using CSS for the different visual presentation?

3. In the example, the text alternative "remove" is conveyed via
aria-describedby because (according to the comment in the code) "if used
within the button text itself, it ends up being read with the input
name". Why would it be read with the input name?

I appreciate your response. Thanks a lot.

Sonja