Opened 6 years ago

Closed 5 years ago

#7840 closed bug (fixed)

Autocomplete: popup results not read by screen-readers

Reported by: ezufelt Owned by:
Priority: blocker Milestone: 1.9.0
Component: ui.autocomplete Version: 1.8.16
Keywords: a11y Cc:
Blocked by: Blocking:

Description

Firefox 7.0.1 JAWS 13 Autocomplete demo 1.9pre

Using a screen-reader it is possible to navigate to the autocomplete field, to start entering a value, and to be notified that a 'menu' has appeared. It is also possible to use the arrow keys to navigate the menu and to select an autocomplete option.

Problem

Screen-readers, however, do not read the items within the menu while navigating, so it is not possible to know which result is selected without navigating away from, and returning back to the autocomplete field.

Solution

  1. set focus to the menu (and active menu item) while navigating. Return focus to the autocomplete field if a character key is pressed.
  1. Use a hidden ARIA live region to announce the currently selected item (as is done with the Drupal 7 autocomplete widget, which can be seen at http://certifiedtorock.com/ ).

Change History (10)

comment:1 Changed 6 years ago by Scott González

Priority: minorblocker
Status: newopen

There's a long discussion about this on the jquery-a11y list. I suggest going with what Drupal does because we're trying very hard not to move focus around.

comment:2 Changed 6 years ago by ezufelt

Agreed that option 2 is likely best, especially for complex implementations such as custom data / categories.

comment:3 Changed 6 years ago by Scott González

Keywords: a11y added

comment:5 Changed 6 years ago by ezufelt

I've been working on this issue, extending the work done by Hans.

  • removes "menu" role from popup <ul> (this really isn't a menu in the context of autocomplete, and was causing problems with live region announcements)
  • adds role="application" to element's parent
  • announces "Autocomplete popup" when the menu appears (perhaps on a delay)
  • announces items while navigating using arrow keys (in default demo), but not in multiple demo

I have a couple of questions that I think may clarify things for me.

  1. Am I correct to believe that in default (single) mode the text contents of the element are replaced while navigating the menu, but that this is not the case in multiple mode?
  1. Are there events that fire:
  • when the populated menu appears
  • when it is destroyed (or disappears)
  • when an item in the menu is selected (highlighted)?
  1. If the above events do not exist, what are your recommendations for the next best approximation of these 'events'?

Thanks

comment:6 Changed 6 years ago by ezufelt

I did a bit more research, and would appreciate some confirmation:

  1. Using the 'focus' event of the menu component I can find out which item of the menu has just received focus.
  2. _suggest() executes when the menu is populated (refreshed).
  1. close() executes when the menu is hidden.

comment:7 in reply to:  5 Changed 6 years ago by Scott González

Replying to ezufelt:

  • removes "menu" role from popup <ul> (this really isn't a menu in the context of autocomplete, and was causing problems with live region announcements)

That should be fine. I would assume there are no negative side effects to having all other ARIA roles and states set inside the menu even though it doesn't have the menu role.

  • adds role="application" to element's parent

I'm a bit concerned about this because it can affect a lot of other content on the page. So far we've stayed away from ever setting an application role. We should have a longer discussion about this outside of this ticket.

I have a couple of questions that I think may clarify things for me.

  1. Am I correct to believe that in default (single) mode the text contents of the element are replaced while navigating the menu, but that this is not the case in multiple mode?

Yes, but that's only the default implementation. If you call event.preventDefault() in the autocompletefocus event, then the value of the text field does not get updated during navigation. All of the multiple word demos do this, but you could do the same in a single word usage as well.

  1. Are there events that fire:
  • when the populated menu appears

_suggest()

  • when it is destroyed (or disappears)

close()

  • when an item in the menu is selected (highlighted)?

The menu focus event.

comment:8 Changed 6 years ago by ezufelt

https://github.com/ezufelt/jquery-ui/commit/1feec649032e20b66f005966be2ffe788ee09177

First pass at accessible autocomplete.

  • Adds role="application" to input element parent*
  • Adds an invisible live region
  • Adds an options string to be spoken, placed in live region, when suggestions appear, defaults to "Autocomplete popup"
  • Speaks name of focused menu item (suggestion)

I did quick testing and this is working in JAWS 13 + FF 8 for both default and multiple demos.

  • We need to use role="application" to ensure that arrow keys are passed to the input element by screen-readers. I tried using

var elementApplicationWrapper = $("<span role='application'></span>"); this.element.replaceWith(elementApplicationWrapper).appendTo(elementApplicationWrapper);

This seemed to break things and I did not receive any suggestion popup, although the input element was a child of the span in the correct position in the DOM.

comment:9 Changed 6 years ago by ezufelt

https://github.com/ezufelt/jquery-ui/commit/427815efbc031ec22139face9c016dcca1148cf6

The above commit:

  • Removes the 'menu' role from the list of autocomplete suggestions
  • creates a hidden live region span
  • announces "Autocomplete popup" when the suggestions appear (configurable string)
  • Announces each item as it is selected (sometimes twice because of application role not being enabled )
  • does not have 'application' role

ToDo

  • Decide if message needs to be added when search begins
  • Test more thoroughly (write tests?)
  • Make final decision on application role
  • decide if we need to / can we remove all @role attributes from the suggestions 'menu'

comment:10 Changed 5 years ago by Jörn Zaefferer

Resolution: fixed
Status: openclosed

Autocomplete: ARIA live region as extension, adding a messages option. Fixes #7840 - Autocomplete: popup results not read by screen-readers

Changeset: f4b2d7a4115814b64ff291e3518fe15f2dfbe390

Note: See TracTickets for help on using tickets.