WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Selects with drop downs

for

From: Steve Green
Date: Mar 14, 2018 10:05PM

Hi Bryan,

I'm sorry, I somehow put the wrong URL in my email. At this stage I am only interested in doing a single native select comparison and I was indeed testing the URL you said I should use. Specifically, I was only testing the Country combobox on that page. Could you please check if you get the same results that I do?

The explanations in your email and in your various websites are enormously helpful. Frankly, the whole thing is so insanely complex it's no surprise that no one else can build any kind of combobox that works correctly. I don't have the development skills to even attempt it, but I do have the testing skills to evaluate other people's designs, and your writings have helped me understand why I get the results that I do.

Regards,
Steve

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
Sent: 14 March 2018 23:51
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Selects with drop downs

Hi,
I just tested the demo you mentioned using JAWS2018 in IE11, and it does appear to be working as intended.

The problem appears to be that you are testing a multiselect combobox, and expecting this to work in the same manner as a single select combobox. Comboboxes are not one-size-fits-all, so some are editable, some readonly, some simulated readonly, and some use different string matching scenarios like first character string matching, or sub-string matching, or even whole word string matching. The WhatSock Combobox module supports all of these as configuration options during setup.

If you are just trying to test a single native select comparison, then you should be testing the following example:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm

Instead, you are testing a multiselect combobox for advanced functionality, in which you are supposed to arrow up and down between the listbox options and press the Spacebar to toggle which option is selected, then press Enter to save your selections.

Where focus is located when Enter is pressed in this case, doesn't matter, because only the checked options are saved, not the one that has focus. This is intended to work this way because if the focused option was also saved regardless if it were checked or unchecked, it would break this multiselect functionality.

All of these variations are explained in the ARIA Combobox mapping table at http://whatsock.com/training/matrices/#combobox
And strictly adhere to the ARIA Combobox design pattern guidance documented at https://www.levelaccess.com/differences-aria-1-0-1-1-changes-rolecombobox/

The reason why a general keyboard pattern is used for all of these comboboxes, in which the Down arrow opens them and Up and Down navigates them, plus Spacebar by itself toggles multiselection if this is enabled, is because then all of these key paradigms work equally across all browsers that support a keyboard.

In contrast, if using a native select element, then Alt+Down is needed to open the combobox, though the Down arrow can be used instead, but this latter will automatically trigger the onChange handler to fire if this is present on the control, which may cause automatic form submissions if something like this is applied. Also, if using a select combined with the multiple attribute, then this control turns into a multiselect listbox instead, and in IE11 you have to press Shift+F8 to expand a multiselect listbox so you can then press Up and Down to navigate without automatically selecting whatever has focus and press the Spacebar to toggle selection. However, if you use the same control in Firefox, then you have to hold down the Control key while pressing Up or Down to move focus between multiselect options and use the Spacebar to toggle selection instead, which is totally different from the way that IE11 does it.

As a result, if I were to attempt to simulate a native select exactly, then I would have to program different keyboard paradigms for use in every browser, which would be really annoying and extremely buggy, and would end up confusing people if I implemented the IE11 use of pressing Shift+F8 and forced users in Firefox and Chrome to have to do the same thing even though native selects don't work that way on those browsers.

It makes more sense to me to simply stick with the simplest approach, and use Down to open a combobox widget, Up and Down to navigate it, Enter or Tab to save your selection and move focus to the next control, or Escape to close without saving and return focus to the original combobox field, and to make certain this works the same across all browsers equally.

It's also important to keep in mind that, in ARIA, a Listbox is not the same control as a Combobox, and both of these have different requirements. Live examples that demonstrate this for Listbox widgets can be found in the right-most Implementation Notes column at http://whatsock.com/training/matrices/#listbox

A Listbox is most useful for widgets that are always present on the page, whereas a Combobox is useful for rendering dynamic lists of options based on user interaction.

Hopefully this helps a bit,
Bryan


Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.LevelAccess.com

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Steve Green
Sent: Wednesday, March 14, 2018 11:47 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Selects with drop downs

Hi Bryan,

I will reply off-list. At this stage all I really want is a replacement for a native combobox, so I have only been testing the Country combobox at http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm. All the other whizzy features such as autocomplete can wait until we get the basic widget working.

Steve

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Bryan Garaventa
Sent: 14 March 2018 18:09
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Selects with drop downs

"and the Whatsock designs don't work at all well in some cases. In one specific case, JAWS 2018 announces that the combobox has been set to a different value than has actually been selected."

Hi,
There are many possibilities which may be causing this confusion, not just the programming of the widget. E.G The purpose you are trying to use the combobox for, support level differences between browsers or screen reader bugs, or configuration settings available within the combobox widget that you may not be aware of.

So, when you get a chance, can you please reply with steps to reproduce, including the version of JAWS and which browser you are using plus the widget example you are testing? Also please explain the negative behavior that you are experiencing, which will give me a sense of where to home in specifically.

Thanks,
Bryan



Bryan Garaventa
Accessibility Fellow
Level Access, Inc.
<EMAIL REMOVED>
415.624.2709 (o)
www.LevelAccess.com

-----Original Message-----
From: WebAIM-Forum < <EMAIL REMOVED> > On Behalf Of Steve Green
Sent: Wednesday, March 14, 2018 7:31 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Selects with drop downs

I have been testing those Whatsock comboboxes recently and I find that they only work well under certain specific circumstances. There are many ways in which a user can interact with even a simple combobox (I have tested ten ways but there are potentially more), and the Whatsock designs don't work at all well in some cases. In one specific case, JAWS 2018 announces that the combobox has been set to a different value than has actually been selected.

It's worth noting that even when the behaviour is acceptable, the user experience is substantially different from a native combobox. I find it disappointing and frustrating that the HTML5 and ARIA specifications have not been written such that it is possible to closely or exactly emulate a native combobox. It would be interesting to know if there is a reason for this. It seems such an obvious thing to want to do.

I hadn't planned to post these comments yet but I felt obliged to since you were recommending these designs. I will send Bryan Garaventa my report as soon as it is complete. I very much hope that he can fix his designs because they are better than any other combobox replacements I have tested. However, I don't regard them as being good enough to recommend to our clients yet.

Steve Green
Managing Director
Test Partners Ltd


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Brandon Keith Biggs
Sent: 14 March 2018 14:03
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Selects with drop downs

Are these datalists?
https://www.w3schools.com/tags/tag_datalist.asp

Otherwise, AccDC has some fantastic comboboxes:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm

http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Multiselect%20Editable%20with%20Substring%20Match)/demo.htm

http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Simulated,%20Readonly)/demo.htm

There are several others, but you can find them in the technical style guide.
Thanks,


Brandon Keith Biggs <http://brandonkeithbiggs.com/>;

On Wed, Mar 14, 2018 at 5:54 AM, Ryan E. Benson < <EMAIL REMOVED> >
wrote:

> Pardon the title, I am not sure what these things are officially called.
> There's a group bent on using select elements aka dropdowns with
> built-in search/filter functions. I believe there was a thread here a
> while ago, but can't find it. Unless I am mistaken, the thread leaned
> towards not using them, even though they can be made accessible. The
> PM and the second developer didn't know what framework they were
> using, and have yet to hear back from the lead, but they think Bootstrap "or based on it."
>
> Any pointers would be great, since i have yet to get access to their code.
>
> --
> Ryan E. Benson
> > > archives at http://webaim.org/discussion/archives
> >