Skip to main content

Search and Top Navigation

#7840 closed bug (fixed)

Opened November 08, 2011 02:01PM UTC

Closed May 16, 2012 10:06AM UTC

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.

2. 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/ ).

Attachments (0)
Change History (10)

Changed November 08, 2011 02:06PM UTC by scottgonzalez comment:1

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.

Changed November 08, 2011 02:12PM UTC by ezufelt comment:2

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

Changed November 08, 2011 02:40PM UTC by scottgonzalez comment:3

keywords: → a11y

Changed December 29, 2011 09:38AM UTC by ezufelt comment:5

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?

2. 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)?

3. If the above events do not exist, what are your recommendations for the next best approximation of these 'events'?

Thanks

Changed December 29, 2011 10:27AM UTC by ezufelt comment:6

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).

3. close() executes when the menu is hidden.

Changed December 29, 2011 01:09PM UTC by scottgonzalez comment:7

Replying to [comment:5 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.

2. 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.

Changed December 29, 2011 02:21PM UTC by ezufelt comment:8

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.

Changed January 13, 2012 07:47AM UTC by ezufelt comment:9

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'

Changed May 16, 2012 10:06AM UTC by Jörn Zaefferer comment:10

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