ARIA Combobox

From Level Access Web Labs
Jump to navigation Jump to search

Example 1, Based on native <input>

Note about this example:

  • Bullet's are shown because wiki overrides list-style-type.
  • This solution uses the autocomplete="list" approach with aria-activedescendant on a listbox.

Challenges this solution overcomes:

  • IE does not render display none referred to be aria-activedescendant. This example make the visible child input as the activedescendant when the combobox is closed.
  • IE appears to create a infinite combobox structure when role combobox applied to input. This solution uses a div with role of combobox.
  • JAWS auto forms mode doesn't work correctly when role of combobox is used on input field -- it sees the box as an edit and turns off forms mode when arrow keys are used. This solution uses a div element instead with a role of combo box.
  • activedescendant doesn't work right in IE unless tabindex="-1" is put on each element. That is done in this example.

Reference: WAI - description, properties, keyboard interaction.

ARIA Combobox

  • iOS
  • Android
  • Windows Phone

Results for example 1

With JAWS and IE all the values in the combo box are announced when reading in virtual cursor mode if the combo box is expanded. The Roll of combo box is not announced. In Chrome the Currently selected value is announced twice when navigating with the ARROW keys in Virtual cursor mode. In Firefox the currently selected value is announced in virtual cursor mode followed by the role of list box. NVDA in Firefox and Chrome work as expected. The name Role and value of the combobox are announced in Browse Mode and Focus mode. In IE it is not possible to determine the currently selected value of the combo box in Brows mode. In iOS the name and Role are announced. When activating the combo box, the values are not announced by VoiceOver. With Talkback and Chrome the Name and role of the combo box are announced as expected. when the Combo box is activated the list of choices is not announced by Talkback. When navigating by control the name of the combo box is not announced by TalkBack.

Example 2, <button> using aria-owns

Notes about this example:

  • Example is primarily designed to demonstrate a remediation of a typical <button> bound pop-out section control, e.g. the type of simulated "drop-down" control generated by a UI library such as legacy versions of jQueryUI.
  • Example utilizes jQuery as a matter of expediency (i.e. developer of the example was able to generate the code by integrating event handler code from previous examples). It is not a requirement of compliant design for this type of structure.
  • 3/27/17 note - example code not currently complete, widget lacks event handler code for arrow keys to increment the value when combobox is collapsed. Update pending

Select a Browser: