In certain contexts, we want to create a component to allow the user to select multiple options for a specific category that we provide for the user. The user should be able to open a dialog in order to select the options and then close the dialog when finished.
There are several different HTML components that we can use for the actual selection of the different options which we want to compare here. The dialog should work the same for each option.
The list of checkboxes is the best option!
Both the built-in select with the multiple attribute and a custom listbox with the aria-mulitselectable attribute are difficult (or impossible) to use for assistive technologies.
In this example, we use a list of checkboxes within a group in order to allow the user to select multiple options.
Note: this example also explicitly adds a tabindex to the fieldset element so that it is the first element that is focused when the dialog is opened. This means that the contents of the list of checkboxes with all the options can be read out with assistive technologies.
In this example, we use a select element with the multiple attribute in order to allow the user to select multiple options. Here there are some concerns about usability: some users may not realize that they need to use the Shift key on the keyboard in order to select multiple options.
Note: Using a list of checkboxes is preferable, because although assistive technologies may correctly read out the contents of a select with the multiple attribute, it may be difficult/impossible to actually select the elements within the list.
In this example, we use a custom listbox element with the attribute aria-multiselectable in order to allow the user to select multiple options. This implementation uses the selection model recommended by MDN for multiple selection , which means that the user can iterate through the options with Arrow Up and Arrow Down and change the selection state of an item by pressing Space. Navigation with the Home and End key to navigate to the first and last option, respectively, are also supported. Additional selection options with the modifier keys Shift and Control are not supported.
Note: Using a list of checkboxes is preferable, because although this custom Listbox implementation is keyboard accessible, it is not easy to use in either NVDA or VoiceOver (and possibly in other assistive technologies as well).