WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Selects with drop downs

for

From: Bryan Garaventa
Date: Mar 14, 2018 5:50PM

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