<select multiple> usability improvement suggestions
@gregwhitworth is already working on this.
Since Jun 18, 2020.
- Dominant language
- MDX
- Stars
- 4.5k
- Forks
- 226
- Avg merge
- 2d 22h
- Merged PRs (30d)
- 4
Description
Problem
The <select multiple> built into HTML is difficult to use, both for AT (assistive technology) and non-AT users. The reasons for its current design are historical and date back to when the web was copying native Windows widgets from the 90s. There are very good reasons why most websites avoid <select multiple>, and prefer to use a JS-based widget that presents them as a list of checkboxes instead. Let’s move forward with a modern design.
Recommendation
Present <select multiple> as a set of checkboxes like JS widget libraries tend to do.
The Material List widget provides a good demonstration of this could work, see https://material.angular.io/components/list/overview#selection-lists
Standalone version: https://gxlepjxpdpr.angular.stackblitz.io
| Problem | Does a list of checkboxes solve the problem? | How does it solve the problem? |
|---|---|---|
| Unclear visual model. On some platforms, it’s difficult to differentiate the currently focused item from something that is selected, as they may both use a background color change. Or, the focus may be a dotted outline that is hard to see. | Yes | Checkboxes are obvious. The difference between the currently focused item and a checked item is obvious (checkbox vs background color) |
| Unclear mouse model. Shift/ctrl/cmd click are unintuitive and rarely known | Yes | Everyone knows how to use a checkbox |
| Unclear keyboard model.Most understand don’t understand the need to use ctrl+click, ctrl+arrow, ctrl+space, shift+F8 (IE) | Yes | Up/down/space are easy to understand, intuitive from the presentation |
| Difficult multi-finger/multi-hand physical interactions for older users, people with physical disabilities | Yes | Click/up/down/space are easy and require only one hand |
| Easy to accidentally lose selection. Pressing an arrow key or clicking clears the entire selection. | Yes | Selection is retained when user navigates. |
What about multiselect comboboxes?
Aka <select size=”1” multiple>
These currently don’t work in native HTML and must be implemented in JS. While we’re at it, let’s also enable these in browsers. A list of checkboxes works very nicely in a dropdown.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Assessment
This issue has not been assessed yet.