<select multiple> usability improvement suggestions

aleventhal commented 4 years ago

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.

gregwhitworth commented 4 years ago

Thanks @aleventhal - I greatly appreciate you raising this. I'll work out a PR on a multiple section.

gregwhitworth commented 3 years ago

@smhigley as discussed - it would be cool if you could help with the research on this

github-actions[bot] commented 2 years ago

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.

aleventhal commented 2 years ago

+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: @.***>

jimmywarting commented 2 years ago

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)

github-actions[bot] commented 1 year ago

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.

josepharhar commented 1 year ago

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?

NeilWix commented 1 year ago

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 element or to add a feature to the new element? If it's for selectmenu then this issue should probably be merged into #447 https://github.com/openui/open-ui/issues/447 right?

— 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: @.***>

aleventhal commented 1 year ago

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 element or to add a feature to the new element? If it's for selectmenu then this issue should probably be merged into #447 https://github.com/openui/open-ui/issues/447 right?

— 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: @.***>

scottaohara commented 1 year ago

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.

josepharhar commented 1 year ago

Select multiple was moved to v2 here, so I'm changing the labels: https://github.com/openui/open-ui/issues/531#issuecomment-1145170806

github-actions[bot] commented 1 year ago

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.

josepharhar commented 6 months ago

I think that we are definitely going to use checkboxes for multi select

openui / open-ui