WebAIM - Web Accessibility In Mind

E-mail List Archives

Fw: How to make a Google-style Auto Suggestion Search Field that is automatically accessible

for

From: Bryan Garaventa
Date: Oct 19, 2011 10:42AM

FYI. This identifies an interesting bug in JAWS' ability to detect ARIA
role=combobox fields in Firefox.

----- Original Message -----
From: "Bryan Garaventa" < <EMAIL REMOVED> >
To: < <EMAIL REMOVED> >
Sent: Tuesday, October 18, 2011 9:52 PM
Subject: Re: How to make a Google-style Auto Suggestion Search Field that is
automatically accessible


> Yes, I know what you mean. This is actually a JAWS bug when using Firefox
> and ARIA however, and is beyond my control to change. Only Freedom
> Scientific can take care of this one.
> E.G.
> Here is a breakdown of the problem.
>
> The following tag works correctly in JAWS12 when using Firefox:
> <input type="text" name="q" size="57" id="q" />
> You will notice that you can edit text within this field with no problems.
>
> However, now try the following tag instead:
> <input role="combobox" type="text" name="q" size="57" id="q" />
> You will now notice that you can no longer edit anything within the edit
> field using JAWS and Firefox, which directly corrolates with the addition
> of role="combobox".
>
> The same is true for the focus redirection when the Escape key is pressed.
> JAWS is not correctly maintaining Forms Mode when this occurs, even though
> the list is closed and focus is being set on the edit field.
>
> I've tested this demo using JAWS12 with IE8/9 and the latest versions of
> Firefox, using ChromeVox with the latest version of ChromeVox, and the
> latest version of NVDA with IE8/9 and the latest version of Firefox.
>
> NVDA is actually much better when using Firefox, and JAWS is much better
> when using IE. This is an issue that is best addressed by the screen
> reader manufacturers, and cannot be fully addressed using scripting alone
> unfortunately.
>
>
>
>
>
> ----- Original Message -----
> From: "Matthew King" < <EMAIL REMOVED> >
> To: < <EMAIL REMOVED> >
> Sent: Tuesday, October 18, 2011 9:03 PM
> Subject: Re: How to make a Google-style Auto Suggestion Search Field that
> is automatically accessible
>
>
>> Brian, Currently, in this implementation and many others, when using jaws
>> and typing in the edit, edit functions do not work. This is before
>> pressing down arrow. You should be able to left/right, select, delete,
>> etc.
>>
>> Also, in search applications, even after browsing the suggestions, one
>> should be able to press escape and return the edit field to continue
>> editing.
>>
>> Matt King
>> IBM I/T Chief Accessibility Strategist
>> IBM BT/CIO - Global Workforce and Web Process Enablement
>> Phone: (503) 578-2329, Tie line: 731-7398
>> <EMAIL REMOVED>
>>
>>
>>
>> "Bryan Garaventa" < <EMAIL REMOVED> >
>> Sent by: <EMAIL REMOVED>
>> 10/18/2011 09:39 AM
>> Please respond to
>> <EMAIL REMOVED>
>>
>>
>> To
>> < <EMAIL REMOVED> >
>> cc
>>
>> Subject
>> Re: How to make a Google-style Auto Suggestion Search Field that is
>> automatically accessible
>>
>>
>>
>>
>>
>>
>> Thanks :) Actually the demo isn't quite done yet, I had limited time last
>> night to work on it.
>>
>> The removal of aria-autocomplete="list" is an oversight. I'll add this
>> later
>> and see what the impact is. From what I remember about experimenting with
>> it
>> earlier, it didn't appear to really make a difference one way or the
>> other
>>
>> regarding the functionality.
>>
>> You're right, the hidden text within the label isn't necessary any
>> longer;
>>
>> this was a throwback to the initial functionality. There are a few
>> conceptual changes I'm planning on making, including the removal of
>> redundant info like this in the page itself.
>>
>> It makes sense that the edit commands aren't working within the screen
>> reader, since the div with the suggested item is the element that has
>> focus
>> at that point, and none of these are editable. The purpose of the drop
>> down
>> functionality is basically an easy method for screen reader users to
>> access
>> the suggested items list, then press enter on the selected item, or press
>> alt+uparrow, and then the selected item text is added to the edit field.
>> It's not really supposed to be a drop-down in the same sense as a
>> standard
>>
>> edit field.
>>
>> It would probably help if I explained the intended functionality, and the
>> changes that I plan on implementing.
>>
>> The component is supposed to simulate the auto suggest functionality
>> experienced on the Google home page search field. To this end, it's not
>> really a dropdown. For instance, there is no way of knowing what a person
>> will search for, so nothing is suggested until that happens. The country
>> list is just a simple query that is intended to illustrate the concept,
>> and
>> not really practicle in and of itself.
>>
>> In order to make this work properly, the edit field has to retain it's
>> ability to maintain stored search queries so you can use the arrow keys
>> to
>>
>> select previous entries.
>>
>> To make the auto suggested items list accessible, there needs to be a
>> simple
>> method for accessing the listed entries from the same field, that doesn't
>> override the standard autocomplete functionality of the edit field
>> itself.
>>
>> One option is to use an alt+downarrow hotkey to enter the list, the arrow
>> keys to select an item, then alt+uparrow or enter to choose an item and
>> add
>> that text to the edit field. Another option is to make the first
>> suggested
>>
>> item keyboard accessible to initiate this functionality. Both are easily
>> done at the same time, which is one thing I plan on implementing later.
>> Obviously the alt+arrow combination doesn't work in Opera, so the
>> combination of both methods would cover all the bases. The use of Escape
>> is
>> just a simple way to route focus back to the edit field, and isn't really
>> intented to close anything in the sense of a dropdown, though it's easy
>> enough to make it do this.
>>
>> Currently pressing up/down by itself will cause the same list to receive
>> focus, which is something I intend on removing later so as not to
>> interfere
>> with the standard browser autocomplete functionality.
>>
>> Regarding Kevin's message, I'll experiment with the ARIA tags a bit as
>> well,
>> and see if different feedback is achievable in various screen readers. No
>> promises about that though, since all screen readers have their own
>> conventions for conveying different types of information such as field
>> types
>> and content states.
>>
>> Hopefully this helps to explain the various features of the demo. It
>> won't
>>
>> take long to update; I'll work on this later tonight.
>>
>> ----- Original Message -----
>> From: "Matthew King" < <EMAIL REMOVED> >
>> To: < <EMAIL REMOVED> >
>> Sent: Tuesday, October 18, 2011 5:57 AM
>> Subject: Re: How to make a Google-style Auto Suggestion Search Field that
>> is
>> automatically accessible
>>
>>
>>> Brian,
>>>
>>> It's nice to have one more attempt at an an ARIA implementation of combo
>>> that uses autocomplete of list. So far, I have not found one where all
>>> features work as they should. I think there are still both browser and
>>> screen reader gaps in support, but haven't sorted it all out.
>>>
>>> I am Still not clear why you removed autocomplete=list. That is what the
>>> aria spec would call for in this case.
>>> I find this interesting:
>>> <span class="screenReading">(Press Up and Down to browse suggested
>>> items)</span>
>>>
>>> Since you are using aria, you could use aria-describedby if you wanted
>> to
>>> provide that kind of description. But, it is a combo, so why the need
>> for
>>> that kind of instruction?
>>>
>>> I haven't tried the latest NVDA, but one set of issues when using with
>>> JAWS is that edit functions do not read properly, e.g., left/right,
>>> delete, backspace, shift+home, etc. Not sure if these are JAWS issues,
>> FF
>>> issues, or implementation.
>>>
>>> I noticed escape does not close the list and cancel list item selection.
>>>
>>> Typically, if a combo has a reasonably limitted set of possible values,
>>> you could open with alt+down without typing any characters. That does
>> not
>>> work on this, but I assume that you implemented in that way because
>>> country isn't really a representative example of usage.
>>>
>>> Matt King
>>> IBM I/T Chief Accessibility Strategist
>>> IBM BT/CIO - Global Workforce and Web Process Enablement
>>> Phone: (503) 578-2329, Tie line: 731-7398
>>> <EMAIL REMOVED>
>>>
>>>
>>>
>>> "Bryan Garaventa" < <EMAIL REMOVED> >
>>> Sent by: <EMAIL REMOVED>
>>> 10/17/2011 09:54 PM
>>> Please respond to
>>> <EMAIL REMOVED>
>>>
>>>
>>> To
>>> < <EMAIL REMOVED> >
>>> cc
>>>
>>> Subject
>>> Re: How to make a Google-style Auto Suggestion Search Field that is
>>> automatically accessible
>>>
>>>
>>>
>>>
>>>
>>>
>>> Ah, I see what you mean; excellent observation. That was definitely a
>>> problem, but now it's not. Tah dah! It's fixed, just like magic ey?
>>> E.G.
>>> The demo now works using JAWS with both IE and Firefox; using NVDA with
>>> Firefox and slightly less so with IE (see below), and yes, it now works
>>> with
>>> ChromeVox as well.
>>>
>>> Demo page:
>>> http://whatsock.com/modules/auto_suggestion_search_field_module/demo.htm
>>> Updated source code:
>>> http://whatsock.com/modules/auto_suggestion_search_field_module.zip
>>>
>>> So now for the interesting part about NVDA and IE support... NVDA won't
>>> announce incoming messages using ARIA for the following reasons
>> according
>>> to
>>> them:
>>>
>>> " Technically speaking, IE doesn't support live regions, but then, IE
>>> doesn't support many things in terms of accessibility. Screen readers
>> have
>>>
>>> to directly interrogate the DOM for many things. The same is true for
>> live
>>>
>>> regions; we need to watch the DOM for changes and then check for live
>>> regions on every change. Unfortunately, this is not at all trivial and
>> we
>>> have no current near-term plans to do it."
>>>
>>> So there you have it... If you would like to share your opinion on the
>>> bug,
>>> please feel free, the url is
>>> http://www.nvda-project.org/ticket/1846#comment:7
>>>
>>> All the best,
>>> Bryan
>>>
>>> ----- Original Message -----
>>> From: "Kevin Chao" < <EMAIL REMOVED> >
>>> To: < <EMAIL REMOVED> >
>>> Sent: Monday, October 17, 2011 1:24 PM
>>> Subject: Re: How to make a Google-style Auto Suggestion Search Field
>> that
>>> is
>>> automatically accessible
>>>
>>>
>>>> Google Chrome 14 and ChromeVox from Chrome Web Store
>>>>
>>>> When typing in character(s), ChromeVox will auto-speak first
>>>> suggestion, but is rather verbose.
>>>> Steps to reproduce:
>>>> TAB to edit box, type "c"
>>>>
>>>> Expected: ChromeVox to speak "Cambodia"
>>>> Actual: ChromeVox speaks "Cambodia unselected, Cambodia"
>>>>
>>>> DOWN ARROW through other suggestions
>>>>
>>>> Expected: country name to be spoken only once
>>>> Actual: country name will be spoken twice, selected/unselected will be
>>>> spoken before/after country, or previous and current country names
>>>> will be spoken.
>>>> Notes: It's quite verbose, reading stuff it really shouldn't, and
>>>> reporting info it really shouldn't, and not as smooth as it could be.
>>>>
>>>> Kevin
>>>>
>>>> On 10/17/11, Kevin Chao < <EMAIL REMOVED> > wrote:
>>>>> Firefox's autocomplete functionality is no longer working, which I
>>>>> think should be the case, and is much better in this particular case.
>>>>> However, in addition to the blank that occurs when arrowing through
>>>>> the options, NVDA reports "selected" and unselected" when arrowing
>>>>> through the suggestions.
>>>>>
>>>>> Kevin
>>>>>
>>>>> On 10/17/11, Bryan Garaventa < <EMAIL REMOVED> > wrote:
>>>>>> I guess the simplest things can sometimes be allusive ... 3 hrs of
>>> sleep
>>>>>> probably doesn't help. At any rate, I added the attribute
>>>>>> autocomplete="off"
>>>>>> to the input. Though the "blank" is still announced by NVDA, the
>>>>>> auto-complete functionality shouldn't be taking it over at this
>> point.
>>>>>>
>>>>>> It can still be argued that having the autocomplete functionality
>>> remain
>>>>>> active allows users to use the standard behavior when no suggested
>>> items
>>>>>> are
>>>>>> available however, which would be the best of both worlds.
>>>>>>
>>>>>> ----- Original Message -----
>>>>>> From: "Bryan Garaventa" < <EMAIL REMOVED> >
>>>>>> To: < <EMAIL REMOVED> >
>>>>>> Sent: Monday, October 17, 2011 7:06 AM
>>>>>> Subject: Re: How to make a Google-style Auto Suggestion Search Field
>>>>>> that
>>>>>> is
>>>>>> automatically accessible
>>>>>>
>>>>>>
>>>>>>> Hi, thanks for the feedback.
>>>>>>>
>>>>>>> Actually I had brought up both issues to NVDA, one such is the bug
>> at
>>>>>>> http://www.nvda-project.org/ticket/1846#comment:5
>>>>>>> As you can see, NVDA's standpoint is "Live regions aren't currently
>>>>>>> supported in IE, only in Firefox.", which is actually not true. I'll
>>>>>>> reopen the bug in a few.
>>>>>>>
>>>>>>> Regarding the second issue, it looks like "auto-complete" is an
>>>>>>> automatic
>>>>>>> announcement for all input fields when using NVDA with Firefox. The
>>>>>>> "blank" that is heard when arrowing is distracting, and I've also
>>> filed
>>>>>>> a
>>>>>>> bug for this at
>>>>>>> http://www.nvda-project.org/ticket/1845#comment:3
>>>>>>>
>>>>>>> Unfortunately neither of these issues can be controled from the
>>>>>>> JavaScript, but hopefully with NVDA's help they can be addressed in
>>>>>>> future
>>>>>>>
>>>>>>> versions of the screen reader.
>>>>>>>
>>>>>>>
>>>>>>> ----- Original Message -----
>>>>>>> From: "Kevin Chao" < <EMAIL REMOVED> >
>>>>>>> To: < <EMAIL REMOVED> >
>>>>>>> Sent: Monday, October 17, 2011 5:35 AM
>>>>>>> Subject: Re: How to make a Google-style Auto Suggestion Search Field
>>>>>>> that
>>>>>>> is automatically accessible
>>>>>>>
>>>>>>>
>>>>>>>> Hi Bryan,
>>>>>>>>
>>>>>>>> I looked at your first/initial demo, but there were too many
>> issues,
>>>>>>>> and I wasn't even sure where to start with providing feedback.
>>>>>>>> However, please see below for feedback with IE/FF and NVDA.
>>>>>>>>
>>>>>>>> NVDA 2011.3 beta 1
>>>>>>>> IE8: when typing in part of a country name, EG: "c" or "u", NVDA
>>>>>>>> doesn't auto-speak first result, but it's possible to use DOWN/UP
>>>>>>>> ARROW to go through results. This is working for the most part,
>> with
>>>>>>>> an exception to first result/suggestion not auto-speaking.
>>>>>>>> FF7: first results is auto-spoken, but using DOWN/UP ARROW, Firefox
>>>>>>>> autocomplete options are displayed. Must ESC to switch to browse
>>> mode,
>>>>>>>> DOWN ARROW and ENTER on one of the clickable. I'm sure this is not
>>> how
>>>>>>>> it's intended to work, but should be like in IE8 where it's like a
>>>>>>>> combobox or autocomplete.
>>>>>>>>
>>>>>>>> Kevin
>>>>>>>>
>>>>>>>> On 10/17/11, Bryan Garaventa < <EMAIL REMOVED> > wrote:
>>>>>>>>> Hi,
>>>>>>>>> Just as an update, it looks like JAWS/NVDA not announcing the ARIA
>>>>>>>>> messages
>>>>>>>>> in the demo was my fault. Firefox wasn't calling a prototyped
>>>>>>>>> function
>>>>>>>>> in
>>>>>>>>> the same manner as IE, which caused the disconnect to occur.
>>> Problem
>>>>>>>>> solved!
>>>>>>>>> I updated AccDC with the new code, so the same demo now works with
>>>>>>>>> JAWS
>>>>>>>>> and
>>>>>>>>> NVDA using Firefox. I love progress...
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> ----- Original Message -----
>>>>>>>>> From: Bryan Garaventa
>>>>>>>>> To: <EMAIL REMOVED>
>>>>>>>>> Sent: Thursday, October 13, 2011 6:19 PM
>>>>>>>>> Subject: How to make a Google-style Auto Suggestion Search Field
>>>>>>>>> that
>>>>>>>>> is
>>>>>>>>> automatically accessible
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> This one's pretty basic, but I thought it might be interesting.
>>>>>>>>>
>>>>>>>>> The Auto Suggestion Search Field Module is a Google-style UI
>>>>>>>>> component
>>>>>>>>> that uses a remote API query to automatically populate suggested
>>>>>>>>> items
>>>>>>>>> using
>>>>>>>>> direct user input, which is automatically accessible to screen
>>> reader
>>>>>>>>> and
>>>>>>>>> keyboard only users.
>>>>>>>>>
>>>>>>>>> The demo makes a simple remote search query for a country name.
>>>>>>>>> Since
>>>>>>>>> a
>>>>>>>>> callback is used with delayed processing, there is no freezing up
>>> of
>>>>>>>>> Assistive Technologies experienced when quickly typing data into
>>> the
>>>>>>>>> input
>>>>>>>>> field.
>>>>>>>>>
>>>>>>>>> Also, you'll notice that none of the suggested items are
>> keyboard
>>>>>>>>> accessible; this is because they don't need to be. The arrow keys
>>>>>>>>> work
>>>>>>>>> in
>>>>>>>>> the same manner as a combo box.
>>>>>>>>>
>>>>>>>>> Instructions:
>>>>>>>>> . Start typing in the "Search for Country" field.
>>>>>>>>> . Using the mouse, click a suggested item to add it to the
>> search
>>>>>>>>> field.
>>>>>>>>> . Using the keyboard, use the Up and Down arrow keys to browse
>>>>>>>>> suggested
>>>>>>>>> items.
>>>>>>>>>
>>>>>>>>> Live demo:
>>>>>>>>>
>>> http://whatsock.com/modules/auto_suggestion_search_field_module/demo.htm
>>>>>>>>> Zip download:
>>>>>>>>>
>> http://whatsock.com/modules/auto_suggestion_search_field_module.zip
>>>>>>>>>
>>>>>>>>> Known issues:
>>>>>>>>> 1. JAWS12 doesn't speak the first matched result automatically
>>>>>>>>> using
>>>>>>>>> FF.
>>>>>>>>> 2. NVDA doesn't speak the first matched result using IE8 nor FF,
>>>>>>>>> and
>>>>>>>>> doesn't speak the changed result when using the Up and Down arrow
>>>>>>>>> keys
>>>>>>>>> to
>>>>>>>>> navigate suggested items.
>>>>>>>>>
>>>>>>>>> Since the module script is simply dynamically changing
>>> input.value
>>>>>>>>> and
>>>>>>>>> triggering input.select() when the arrow keys are used to navigate
>>>>>>>>> suggested
>>>>>>>>> items, and the ARIA Announce method uses role="status"
>>>>>>>>> aria-live="assertive"
>>>>>>>>> and aria-relevant="all", I'm inclined to believe that these issues
>>>>>>>>> are
>>>>>>>>> bugs
>>>>>>>>> in each screen reader. From the scripting standpoint, the
>>>>>>>>> implementation
>>>>>>>>> really couldn't be simpler.
>>>>>>>>> As a side note, it appears that role="status" by itself doesn't
>>>>>>>>> work
>>>>>>>>> at
>>>>>>>>> all in either screen reader.
>>>>>>>>>
>>>>>>>>> Best wishes,
>>>>>>>>> Bryan
>>>>>>>>>
>>>>>>>>>
>>>>>>>>> --
>>>>>>>>> You received this message because you are subscribed to the
>>> Google
>>>>>>>>> Groups
>>>>>>>>> "accessible" group.
>>>>>>>>> To post to this group, send email to
>> <EMAIL REMOVED> .
>>>>>>>>> To unsubscribe from this group, send email to
>>>>>>>>> accessible+ <EMAIL REMOVED> .
>>>>>>>>> For more options, visit this group at
>>>>>>>>> http://groups.google.com/group/accessible?hl=en.
>>>>>>>>>
>>>>>>>>> --
>>>>>>>>> You received this message because you are subscribed to the Google
>>>>>>>>> Groups
>>>>>>>>> "accessible" group.
>>>>>>>>> To post to this group, send email to <EMAIL REMOVED> .
>>>>>>>>> To unsubscribe from this group, send email to
>>>>>>>>> accessible+ <EMAIL REMOVED> .
>>>>>>>>> For more options, visit this group at
>>>>>>>>> http://groups.google.com/group/accessible?hl=en.
>>>>>>>>>
>>>>>>>>>
>>>>>>>>
>>>>>>>> --
>>>>>>>> You received this message because you are subscribed to the Google
>>>>>>>> Groups
>>>>>>>>
>>>>>>>> "accessible" group.
>>>>>>>> To post to this group, send email to <EMAIL REMOVED> .
>>>>>>>> To unsubscribe from this group, send email to
>>>>>>>> accessible+ <EMAIL REMOVED> .
>>>>>>>> For more options, visit this group at
>>>>>>>> http://groups.google.com/group/accessible?hl=en.
>>>>>>>>
>>>>>>>
>>>>>>> --
>>>>>>> You received this message because you are subscribed to the Google
>>>>>>> Groups
>>>>>>> "accessible" group.
>>>>>>> To post to this group, send email to <EMAIL REMOVED> .
>>>>>>> To unsubscribe from this group, send email to
>>>>>>> accessible+ <EMAIL REMOVED> .
>>>>>>> For more options, visit this group at
>>>>>>> http://groups.google.com/group/accessible?hl=en.
>>>>>>>
>>>>>>
>>>>>> --
>>>>>> You received this message because you are subscribed to the Google
>>>>>> Groups
>>>>>> "accessible" group.
>>>>>> To post to this group, send email to <EMAIL REMOVED> .
>>>>>> To unsubscribe from this group, send email to
>>>>>> accessible+ <EMAIL REMOVED> .
>>>>>> For more options, visit this group at
>>>>>> http://groups.google.com/group/accessible?hl=en.
>>>>>>
>>>>>>
>>>>>
>>>>
>>>> --
>>>> You received this message because you are subscribed to the Google
>>> Groups
>>>> "accessible" group.
>>>> To post to this group, send email to <EMAIL REMOVED> .
>>>> To unsubscribe from this group, send email to
>>>> accessible+ <EMAIL REMOVED> .
>>>> For more options, visit this group at
>>>> http://groups.google.com/group/accessible?hl=en.
>>>>
>>>
>>> --
>>> You received this message because you are subscribed to the Google
>> Groups
>>> "accessible" group.
>>> To post to this group, send email to <EMAIL REMOVED> .
>>> To unsubscribe from this group, send email to
>>> accessible+ <EMAIL REMOVED> .
>>> For more options, visit this group at
>>> http://groups.google.com/group/accessible?hl=en.
>>>
>>>
>>>
>>> --
>>> You received this message because you are subscribed to the Google
>> Groups
>>> "accessible" group.
>>> To post to this group, send email to <EMAIL REMOVED> .
>>> To unsubscribe from this group, send email to
>>> accessible+ <EMAIL REMOVED> .
>>> For more options, visit this group at
>>> http://groups.google.com/group/accessible?hl=en.
>>>
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "accessible" group.
>> To post to this group, send email to <EMAIL REMOVED> .
>> To unsubscribe from this group, send email to
>> accessible+ <EMAIL REMOVED> .
>> For more options, visit this group at
>> http://groups.google.com/group/accessible?hl=en.
>>
>>
>>
>> --
>> You received this message because you are subscribed to the Google Groups
>> "accessible" group.
>> To post to this group, send email to <EMAIL REMOVED> .
>> To unsubscribe from this group, send email to
>> accessible+ <EMAIL REMOVED> .
>> For more options, visit this group at
>> http://groups.google.com/group/accessible?hl=en.
>>
>