open-ui
open-ui copied to clipboard
openui
<select multiple> usability improvement suggestions
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.
Thanks @aleventhal - I greatly appreciate you raising this. I'll work out a PR on a multiple section.
@smhigley as discussed - it would be cool if you could help with the research on this
There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
+Nicole Sullivan @.***>
On Sat, Mar 19, 2022 at 8:34 PM github-actions[bot] < @.***> wrote:
There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.
— Reply to this email directly, view it on GitHub https://github.com/openui/open-ui/issues/113#issuecomment-1073136979, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKQAZRFMP5HLTBUOHSJQILVAZW7ZANCNFSM4OCAST7Q . Triage notifications on the go with GitHub Mobile for iOS https://apps.apple.com/app/apple-store/id1477376905?ct=notification-email&mt=8&pt=524675 or Android https://play.google.com/store/apps/details?id=com.github.android&referrer=utm_campaign%3Dnotification-email%26utm_medium%3Demail%26utm_source%3Dgithub.
You are receiving this because you were mentioned.Message ID: @.***>
I agree with every single thing in here.
select(multiple) need to have checkboxes and marking a row should be as simple as just pressing spacebar (without holding down extra modifier key, the angular material UI is so much better
the select(multiple) is so bad that no website use it today. I would like to see it making a comeback and rework the hole select(multiple)
There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.
Recommendation Present
<select multiple>as a set of checkboxes like JS widget libraries tend to do.
Is this a recommendation to change the existing <select> element or to add a feature to the new <selectmenu> element? If it's for selectmenu then this issue should probably be merged into https://github.com/openui/open-ui/issues/447 right?
I find the use of checkboxes a bit weird as these imply tab navigation while actually they will be navigated with arrow keys. On the other hand, checkboxes are best to imply multi-selection. Neil Osman Accessibility engineer @ accessibility team
On Tue, Feb 14, 2023 at 3:01 AM Joey Arhar @.***> wrote:
Recommendation Present
Is this a recommendation to change the existing
— Reply to this email directly, view it on GitHub https://github.com/openui/open-ui/issues/113#issuecomment-1428939418, or unsubscribe https://github.com/notifications/unsubscribe-auth/AMBTHV7LURLSX7VMX3OPTELWXLKNFANCNFSM4OCAST7Q . You are receiving this because you are subscribed to this thread.Message ID: @.***>
I think when the are arranged vertically and inside a box that looks like a listbox, it's more apparent. Especially of the focused item is styled with a different background color. It looks like a listbox then, that happens to have checkboxes.
On Tue, Feb 14, 2023 at 3:29 AM Neil Osmna @.***> wrote:
I find the use of checkboxes a bit weird as these imply tab navigation while actually they will be navigated with arrow keys. On the other hand, checkboxes are best to imply multi-selection. Neil Osman Accessibility engineer @ accessibility team
On Tue, Feb 14, 2023 at 3:01 AM Joey Arhar @.***> wrote:
Recommendation Present
Is this a recommendation to change the existing
— Reply to this email directly, view it on GitHub https://github.com/openui/open-ui/issues/113#issuecomment-1428939418, or unsubscribe < https://github.com/notifications/unsubscribe-auth/AMBTHV7LURLSX7VMX3OPTELWXLKNFANCNFSM4OCAST7Q
. You are receiving this because you are subscribed to this thread.Message ID: @.***>
— Reply to this email directly, view it on GitHub https://github.com/openui/open-ui/issues/113#issuecomment-1429322429, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKQAZTFW3ZBID4E7RBHEADWXM65LANCNFSM4OCAST7Q . You are receiving this because you were mentioned.Message ID: @.***>
understood that it might not be how people initially think of interacting with checkboxes, but that doesn't mean it shouldn't be considered. see also https://github.com/openui/open-ui/issues/487
i quite like the idea of moving over to that sort of model, and I know it'd help a lot of inconsistent UX I've seen in large lists of checkboxes which either don't do anything to help facilitate quicker navigation (e.g., tab key navigates through them all) or arrow keys are implemented for navigating, but there's no programmatic or visible way to know this without guess and check interaction.
Select multiple was moved to v2 here, so I'm changing the labels: https://github.com/openui/open-ui/issues/531#issuecomment-1145170806
There hasn't been any discussion on this issue for a while, so we're marking it as stale. If you choose to kick off the discussion again, we'll remove the 'stale' label.
I think that we are definitely going to use checkboxes for multi select