iOS Voiceover support for combobox widgets

Viewed 816

Typically a combobox widget is an input field that launches an associated popup with a bunch of suggestions in the popup. In desktop browsers using keyboard, while the focus stays with the input field, pressing Up/Down arrow keys, the selection within the popup can be changed. Pressing ENTER key populates the input field with current selection in the popup and closes the popup.

For accessibility purpose, the input field is marked role="combobox", the popup is linked with the input field via aria-owns. The AT are indicated the current selection via aria-activedescendant.

While this setup works great in desktop browsers with tools like JAWS/NVDA etc., there seems to be a major issue with voiceover on iOS. On swiping the finger, the virtual cursor moves to the next element in the page from the input field, though I would expect with aria-owns set, the focus to move to the first suggestion item or to the popup.

Any suggestions on how such a combobox widget can be made accessible in iOS with voiceover?

PS: The popup and input field are not siblings in the DOM order.

1 Answers

It sounds like you are creating a custom combobox. If you use the native <select>/<option> elements, the combobox works correctly on ios/voiceover. If you are creating your own, follow the guidance on https://www.w3.org/TR/wai-aria-practices/#combobox. You mentioned several ARIA attributes so perhaps you're already following the advice on that page.

Swiping right with voiceover will move the focus to the next element in the DOM. If your dropdown list is hidden, then focus won't move to it. Double tapping on your <input> should display the dropdown list.

Related