E-mail List Archives
Thread: <select multiple> and WCAG compliance
Number of posts in this thread: 18 (In chronological order)
From: Roel Van Gils
Date: Tue, Oct 24 2017 5:47AM
Subject: <select multiple> and WCAG compliance
No previous message | Next message →
Hi,
I consider using `<select multiple>` (see example below) a very poor practice in terms of accessibility (and usability in general). I usually suggest using a series of checkboxes instead.
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Most users don't know they have to hold down a modifier key (dependent on the OS they're using) to select more than items, and even if even they know (or tell them), it's hard for certain users to operate the keyboard and the mouse at the same time. Without a mouse, I believe that's not even possible in most browsers.
Screenreader support is also spotty, but it's possible (if you try hard enough).
My question is: is it acceptable to let a website fail for WCAG 2.1.1 ('Make all functionality available from a keyboard') when the author uses perfectly valid and semantic HTML? That seems wrong.
That seems really weird, because, after all, it's perfectly valid and Plain Old Semantic HTML.
I'd love to hear your opinions.
Roel
--
Roel Van Gils
Inclusive Design & Accessibility Consultant
Tel.: +32 473 88 18 06
Skype: roelvangils
Twitter: twitter.com/roelvangils
LinkedIn: linkedin.com/in/roelvangils
From: Patrick H. Lauke
Date: Tue, Oct 24 2017 6:15AM
Subject: Re: <select multiple> and WCAG compliance
← Previous message | Next message →
On 24/10/2017 12:47, Roel Van Gils wrote:
> Hi,
>
> I consider using `<select multiple>` (see example below) a very poor practice in terms of accessibility (and usability in general). I usually suggest using a series of checkboxes instead.
>
> <select multiple>
> <option value="volvo">Volvo</option>
> <option value="saab">Saab</option>
> <option value="opel">Opel</option>
> <option value="audi">Audi</option>
> </select>
>
> Most users don't know they have to hold down a modifier key (dependent on the OS they're using) to select more than items, and even if even they know (or tell them), it's hard for certain users to operate the keyboard and the mouse at the same time. Without a mouse, I believe that's not even possible in most browsers.
>
> Screenreader support is also spotty, but it's possible (if you try hard enough).
>
> My question is: is it acceptable to let a website fail for WCAG 2.1.1 ('Make all functionality available from a keyboard') when the author uses perfectly valid and semantic HTML? That seems wrong.
Who is suggesting that <select multiple> would fail WCAG 2.0 2.1.1 ?
Because of course it's not a fail. It's accessible, though arguably not
very user friendly/usable/discoverable. But WCAG 2.0 isn't about usability.
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Steve Green
Date: Tue, Oct 24 2017 6:23AM
Subject: Re: <select multiple> and WCAG compliance
← Previous message | Next message →
My view is that if it doesn't work in all the major browsers, then it's a WCAG non-compliance even if the code is HTML standards-compliant. That particular WCAG success criterion does not require the HTML to be compliant - it requires the feature to be keyboard accessible, which it isn't.
I have been able to select non-contiguous options using Firefox but I have not been able to do so using Chrome or Internet Explorer. Has anyone been able to do so in either of those browsers?
There is another, perhaps bigger, issue. When returning to a page containing a multi-select combobox, the user does not know it is multi-select. If they give focus to it without holding down the necessary modifier key (which seems to be different in each browser) all the selected options will become unselected. There would therefore need to be some text explaining this (and the need for text explaining how your UI works is usually a clue it's a bad design).
Regards,
Steve Green
Managing Director
Test Partners Ltd
From: WebAIM-Forum < = EMAIL ADDRESS REMOVED = > on behalf of Roel Van Gils < = EMAIL ADDRESS REMOVED = >
Sent: 24 October 2017 12:47
To: WebAIM Discussion List
Subject: [WebAIM] <select multiple> and WCAG compliance
Hi,
I consider using `<select multiple>` (see example below) a very poor practice in terms of accessibility (and usability in general). I usually suggest using a series of checkboxes instead.
<select multiple>
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
Most users don't know they have to hold down a modifier key (dependent on the OS they're using) to select more than items, and even if even they know (or tell them), it's hard for certain users to operate the keyboard and the mouse at the same time. Without a mouse, I believe that's not even possible in most browsers.
Screenreader support is also spotty, but it's possible (if you try hard enough).
My question is: is it acceptable to let a website fail for WCAG 2.1.1 ('Make all functionality available from a keyboard') when the author uses perfectly valid and semantic HTML? That seems wrong.
That seems really weird, because, after all, it's perfectly valid and Plain Old Semantic HTML.
I'd love to hear your opinions.
Roel
--
Roel Van Gils
Inclusive Design & Accessibility Consultant
Tel.: +32 473 88 18 06
Skype: roelvangils
Twitter: twitter.com/roelvangils
LinkedIn: linkedin.com/in/roelvangils
From: Roel Van Gils
Date: Tue, Oct 24 2017 6:37AM
Subject: Re: <select multiple> and WCAG compliance
← Previous message | Next message →
Thanks, Patrick. You're probably right, but I find this a very bitter truth.
> Because of course it's not a fail. It's accessible, though arguably not very user friendly/usable/discoverable. But WCAG 2.0 isn't about usability.
I find it very hard to claim that something is 'accessible' when in fact, it's not. I cannot demonstrate it's possible to select any number of arbitrary items in a multiple select without using a mouse in any of the mainstream browsers.. In fact, I think nobody can.
That's why I was wondering if someone would think it's 'acceptable' to flag the use of <select multiple>, despite it's a valid use of HTML.
Roel
From: Patrick H. Lauke
Date: Tue, Oct 24 2017 6:44AM
Subject: Re: <select multiple> and WCAG compliance
← Previous message | Next message →
On 24/10/2017 13:37, Roel Van Gils wrote:
> Thanks, Patrick. You're probably right, but I find this a very bitter truth.
>
>> Because of course it's not a fail. It's accessible, though arguably not very user friendly/usable/discoverable. But WCAG 2.0 isn't about usability.
>
> I find it very hard to claim that something is 'accessible' when in fact, it's not. I cannot demonstrate it's possible to select any number of arbitrary items in a multiple select without using a mouse in any of the mainstream browsers.. In fact, I think nobody can.
>
> That's why I was wondering if someone would think it's 'acceptable' to flag the use of <select multiple>, despite it's a valid use of HTML.
Sorry, I forgot that selecting *non-contiguous* multiple options does
not seem supported in browsers (contiguous ones can be selected in
browsers using just SHIFT+cursor keys). In that case yes, if a site/web
app relies on the ability to select multiple potentially non-contiguous
files (and does not, for instance, allow a user to somehow make further
refinements/selections), then it does indeed smell like an actual
failure due to lack of any actual user agent support for sensible
keyboard navigation in that respect.
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Patrick H. Lauke
Date: Tue, Oct 24 2017 6:45AM
Subject: Re: <select multiple> and WCAG compliance
← Previous message | Next message →
On 24/10/2017 13:44, Patrick H. Lauke wrote:
> Sorry, I forgot that selecting *non-contiguous* multiple options does
> not seem supported in browsers (contiguous ones can be selected in
> browsers using just SHIFT+cursor keys).
Related, would be good to file bugs against browsers to implement this
though.
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Roel Van Gils
Date: Tue, Oct 24 2017 6:58AM
Subject: Re: <select multiple> and WCAG compliance
← Previous message | Next message →
> On 24 Oct 2017, at 14:45, Patrick H. Lauke < = EMAIL ADDRESS REMOVED = > wrote:
>
> Related, would be good to file bugs against browsers to implement this though.
I agree. On the other hand, this is such a long standing issue (multiple selects have been in the HTML spec forever), that browser makers should have figured this out by now, I think.
And even if they would add support for, let's say SHIFT+Space to select or deselect an item in a <select multiple>, how would anyone find out about that?
I think I'll just keep discouraging using them altogether, and I'm glad you do agree it can be considered a WCAG violation if users are expected to make 'non-contiguous' selections (which is the facto use case for using multiple selects anyway).
It's an unfortunate situation, since they're still widely being used (especially in complex web applications).
Roel
From: Jonathan Avila
Date: Tue, Oct 24 2017 7:09AM
Subject: Re: <select multiple> and WCAG compliance
← Previous message | Next message →
> I have been able to select non-contiguous options using Firefox but I have not been able to do so using Chrome or Internet Explorer. Has anyone been able to do so in either of those browsers?
I've been using shift+f8 for multiselect in IE since 1999. It's a well-documented keystrokes to select non-contiguous items.
Jonathan
Jonathan Avila
Chief Accessibility Officer
Level Access, inc. (formerly SSB BART Group, inc.)
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Looking to boost your accessibility knowledge? Check out our free webinars!
The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.
From: Roel Van Gils
Date: Tue, Oct 24 2017 7:18AM
Subject: Re: <select multiple> and WCAG compliance
← Previous message | Next message →
> I've been using shift+f8 for multiselect in IE since 1999. It's a well-documented keystrokes to select non-contiguous items.
Wow! Thanks, Jonathan.
I found a post on MSDN (2008) that says:
> One of the most obscure keyboard shortcuts has got to be Shift+F8, which is used for listbox discontiguous extended selection. Man, what a mouthful. KB article Q301583 doesn't help matters by listing this keyboard shortcut under "Dialog box keyboard shortcuts" even though it isn't a dialog box keyboard shortcut. It's a listbox keyboard shortcut.
(https://blogs.msdn.microsoft.com/oldnewthing/20060808-09/?p0203)
The original KB article that's being referenced, doesn't exist anymore.
I'd have to check whether this keystroke is documented in Internet Explorer Help.
Also, if you happen to know a magic keystroke for Chrome and Safari as well, I rest my case ;)
Roel
> On 24 Oct 2017, at 15:09, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
>
>> I have been able to select non-contiguous options using Firefox but I have not been able to do so using Chrome or Internet Explorer. Has anyone been able to do so in either of those browsers?
>
> I've been using shift+f8 for multiselect in IE since 1999. It's a well-documented keystrokes to select non-contiguous items.
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> Level Access, inc. (formerly SSB BART Group, inc.)
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 (Office)
> Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
> Looking to boost your accessibility knowledge? Check out our free webinars!
>
> The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.
>
>
>
From: Steve Green
Date: Tue, Oct 24 2017 7:22AM
Subject: Re: <select multiple> and WCAG compliance
← Previous message | Next message →
Not sufficiently well documented that I've been able to find it! And I've been looking since about 1999.
In fact it doesn't even turn up in a search when I go looking for it - all the results are about Windows safe mode. So where exactly is it well-documented?
Regards,
Steve
From: Patrick H. Lauke
Date: Tue, Oct 24 2017 7:23AM
Subject: Re: <select multiple> and WCAG compliance
← Previous message | Next message →
On 24/10/2017 14:09, Jonathan Avila wrote:
>> I have been able to select non-contiguous options using Firefox but I have not been able to do so using Chrome or Internet Explorer. Has anyone been able to do so in either of those browsers?
>
> I've been using shift+f8 for multiselect in IE since 1999. It's a well-documented keystrokes to select non-contiguous items.
So well documented that I've never heard of it until now. Works in
IE/Edge, does not work in Firefox/Chrome. Not sure about Safari/macOS
and mobile platforms (with keyboard, or using touchscreen+AT), but have
feeling it's not supported there either.
P
--
Patrick H. Lauke
www.splintered.co.uk | https://github.com/patrickhlauke
http://flickr.com/photos/redux/ | http://redux.deviantart.com
twitter: @patrick_h_lauke | skype: patrick_h_lauke
From: Jonathan Avila
Date: Tue, Oct 24 2017 7:36AM
Subject: Re: <select multiple> and WCAG compliance
← Previous message | Next message →
> So well documented that I've never heard of it until now. Works in IE/Edge, does not work in Firefox/Chrome.
In Firefox you can use control+arrows followed by control+space to make non-contiguous selection like you can in Windows Explorer.
The IE keystroke use to be well documented -- but as you say it doesn't appear to be anymore. It is documented in the JAWS help. Disappointing that it's no longer in IE's help pages.
Jonathan
Jonathan Avila
Chief Accessibility Officer
Level Access, inc. (formerly SSB BART Group, inc.)
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Looking to boost your accessibility knowledge? Check out our free webinars!
The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.
From: Sailesh Panchang
Date: Tue, Oct 24 2017 7:50AM
Subject: Re: <select multiple> and WCAG compliance
← Previous message | Next message →
I echo Jonathan's experience.
Also hold the control key as one goes up and down with arrow keys and
use space to select/deselect.
Thanks,
Sailesh
On 10/24/17, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
>> I have been able to select non-contiguous options using Firefox but I have
>> not been able to do so using Chrome or Internet Explorer. Has anyone been
>> able to do so in either of those browsers?
>
> I've been using shift+f8 for multiselect in IE since 1999. It's a
> well-documented keystrokes to select non-contiguous items.
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> Level Access, inc. (formerly SSB BART Group, inc.)
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 (Office)
> Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
> Looking to boost your accessibility knowledge? Check out our free webinars!
>
> The information contained in this transmission may be attorney privileged
> and/or confidential information intended for the use of the individual or
> entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any use, dissemination, distribution
> or copying of this communication is strictly prohibited.
>
>
>
From: Roel Van Gils
Date: Tue, Oct 24 2017 8:04AM
Subject: Re: <select multiple> and WCAG compliance
← Previous message | Next message →
Thanks all. Very informative.
I knew about multi-select in Firefox, but Shift+F8 in IE / Edge was completely new to me.
If Chrome and Safari are indeed the only browsers there are lacking support, I'd like to file a bug report / feature request.
(I think it might even be possible to mimic the Firefox behaviour in other browsers using scripting.)
Roel
> On 24 Oct 2017, at 15:50, Sailesh Panchang < = EMAIL ADDRESS REMOVED = > wrote:
>
> I echo Jonathan's experience.
> Also hold the control key as one goes up and down with arrow keys and
> use space to select/deselect.
> Thanks,
> Sailesh
>
>
> On 10/24/17, Jonathan Avila < = EMAIL ADDRESS REMOVED = > wrote:
>>> I have been able to select non-contiguous options using Firefox but I have
>>> not been able to do so using Chrome or Internet Explorer. Has anyone been
>>> able to do so in either of those browsers?
>>
>> I've been using shift+f8 for multiselect in IE since 1999. It's a
>> well-documented keystrokes to select non-contiguous items.
>>
>> Jonathan
>>
>> Jonathan Avila
>> Chief Accessibility Officer
>> Level Access, inc. (formerly SSB BART Group, inc.)
>> = EMAIL ADDRESS REMOVED =
>> 703.637.8957 (Office)
>> Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
>> Looking to boost your accessibility knowledge? Check out our free webinars!
>>
>> The information contained in this transmission may be attorney privileged
>> and/or confidential information intended for the use of the individual or
>> entity named above. If the reader of this message is not the intended
>> recipient, you are hereby notified that any use, dissemination, distribution
>> or copying of this communication is strictly prohibited.
>>
>>
>>
From: Jonathan Avila
Date: Tue, Oct 24 2017 8:10AM
Subject: Re: <select multiple> and WCAG compliance
← Previous message | Next message →
You can log webkit bugs at the address below. I believe you may need to create an account to the log the bug.
http://webkit.org/new-ax-bug
Jonathan
Jonathan Avila
Chief Accessibility Officer
Level Access, inc. (formerly SSB BART Group, inc.)
= EMAIL ADDRESS REMOVED =
703.637.8957 (Office)
Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
Looking to boost your accessibility knowledge? Check out our free webinars!
The information contained in this transmission may be attorney privileged and/or confidential information intended for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any use, dissemination, distribution or copying of this communication is strictly prohibited.
From: Jonathan Cohn
Date: Tue, Oct 24 2017 11:58AM
Subject: Re: <select multiple> and WCAG compliance
← Previous message | Next message →
I verified that the multi-elect option in MacOS Safari under El Capitan
10.11 correctly handles <select multiple> when the keystroke vo key plus
command plus return is pressed. In older MacOs, I believe this key
combination either did not exist or else did not disable cursor tracking
causing moves in the VO cursor to also change selection.
In the MacOs running 10.11 - 10.13 when the multi-select key combination
mentioned above is activated then selection stops following the voice over
cursor allowing multiple selection to work correctly with out first
disabling cursor tracking.
Let me know if you need me to check with other Macintosh browsers.
Jonathan Cohn
On Tue, Oct 24, 2017 at 10:10 AM Jonathan Avila < = EMAIL ADDRESS REMOVED = >
wrote:
> You can log webkit bugs at the address below. I believe you may need to
> create an account to the log the bug.
> http://webkit.org/new-ax-bug
>
> Jonathan
>
> Jonathan Avila
> Chief Accessibility Officer
> Level Access, inc. (formerly SSB BART Group, inc.)
> = EMAIL ADDRESS REMOVED =
> 703.637.8957 <(703)%20637-8957> (Office)
> Visit us online: Website | Twitter | Facebook | LinkedIn | Blog
> Looking to boost your accessibility knowledge? Check out our free webinars!
>
> The information contained in this transmission may be attorney privileged
> and/or confidential information intended for the use of the individual or
> entity named above. If the reader of this message is not the intended
> recipient, you are hereby notified that any use, dissemination,
> distribution or copying of this communication is strictly prohibited.
>
>
From: Roel Van Gils
Date: Tue, Oct 24 2017 12:10PM
Subject: Re: <select multiple> and WCAG compliance
← Previous message | Next message →
Thanks so much for testing this, Jonathan!
I'm not really surprised VoiceOver supports selecting multiple non-contiguous selections in a <select>, since this UI pattern exists throughout the OS itself (for example: when selecting files in the Finder, or in the Spotlight Preference Pane).
I'd be surprised, though, if this would be possible when VoiceOver is not used. I haven't figured it out anyway.
(Because, of course, full keyboard operability shouldn't be a privilege of screenreader users only.)
Roel
> On 24 Oct 2017, at 19:58, Jonathan Cohn < = EMAIL ADDRESS REMOVED = > wrote:
>
> In the MacOs running 10.11 - 10.13 when the multi-select key combination
> mentioned above is activated then selection stops following the voice over
> cursor allowing multiple selection to work correctly with out first
> disabling cursor tracking.
From: Birkir R. Gunnarsson
Date: Tue, Oct 24 2017 5:15PM
Subject: Re: <select multiple> and WCAG compliance
← Previous message | No next message
I think it would be prudent to add a help balloon to the page where
multi-select listboxes are used that explains the keyboard operation,
not only for screen reader users, but for other keyboard only users.
Also be aware that this widget is unlikely to be supported on mobile devices.
Keep in mind that operating these listboxes with the keyboard requires
holding up to 3 keys simultaneously, which can be an insurmountable
challenge for someone with mobility or fine motor control issues.
If the listbox has a manageable amount of options, I'd strongly
recommend implementing it as a group of checkboxes instead.
Of course, if the listbox has tens or even hundreds of options, this
is not a feasible approach.
On 10/24/17, Roel Van Gils < = EMAIL ADDRESS REMOVED = > wrote:
> Thanks so much for testing this, Jonathan!
>
> I'm not really surprised VoiceOver supports selecting multiple
> non-contiguous selections in a <select>, since this UI pattern exists
> throughout the OS itself (for example: when selecting files in the Finder,
> or in the Spotlight Preference Pane).
>
> I'd be surprised, though, if this would be possible when VoiceOver is not
> used. I haven't figured it out anyway.
>
> (Because, of course, full keyboard operability shouldn't be a privilege of
> screenreader users only.)
>
> Roel
>
>> On 24 Oct 2017, at 19:58, Jonathan Cohn < = EMAIL ADDRESS REMOVED = > wrote:
>>
>> In the MacOs running 10.11 - 10.13 when the multi-select key combination
>> mentioned above is activated then selection stops following the voice over
>> cursor allowing multiple selection to work correctly with out first
>> disabling cursor tracking.
>
> > > > >
--
Work hard. Have fun. Make history.