WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Reg typeahead/autocomplete accessibility.

for

From: Bryan Garaventa
Date: Aug 9, 2012 2:42PM

I see what you mean. It's going to get complicated if you try writing to the
same field people are typing into though, since this will likely reset the
character position.

Announcement is a good thing, just not using role=alert. Often screen reader
users are used to hearing the letters they type as they type them, and the
use of role=alert will hijack that and interrupt feedback with every
keypress. Using the unobtrusive announce method mentioned in the article
will give you both the announcement and will do it without interrupting
speech.

If I were doing this, I would use a similar method as the Auto Suggest field
I mentioned previously, but with a few changes.

1. Have an input field for typing into, which automatically updates a list
positioned directly after the form field in the DOM.

2. As soon as the first item appears in the list, call the announce method
like so:

announce(function(){
// Get the DOM node of the current selection
var selected = document.getElementById('domNodeId');
// Return a string to be announced
return 'Selected ' + (selected.innerText || selected.textContent);
});

Which will work across various browsers.

3. Add a keyDown handler to the form field so that when Enter is pressed, it
will automatically insert the current selection in the list within the form
field.

This way, all the bases are covered, uninterrupted typing in the form field,
automatic announcement of the current selection, and a keyboard accessible
ARIA powered listbox for making a selection manually.


----- Original Message -----
From: "Ramya Sethuraman" < <EMAIL REMOVED> >
To: "WebAIM Discussion List" < <EMAIL REMOVED> >
Sent: Thursday, August 09, 2012 11:05 AM
Subject: Re: [WebAIM] Reg typeahead/autocomplete accessibility.


> Thanks Bryan. The problem, if I don't use an alert role, is since the
> typeahead first item is autoselected when the user types a letter, if he
> presses enter, he ends up selecting the first item by default, which will
> be unexpected behavior for a screen reader. So if the user types a and the
> first autocomplete suggestion 'airplane' is autoselected from the
> dropdown,
> if the user presses enter, he ends up selecting it. So I need a way for a
> screen reader user to know as he types that the first autocomplete
> suggestion is selected for him...does this make sense? I am thinking, we
> can do away with the alert role if the autoselected entry from the
> dropdown
> is filled in the input field in which case since the input field has
> keyboard focus, Jaws will automatically announce what is autofilled in the
> input field. But, am not really sure how usable this is...the user might
> hear 'a airplane, c account, acc accrue' as he continues typing....
>
> Thanks!
> Ramya
>
> On Thu, Aug 9, 2012 at 10:56 AM, Bryan Garaventa <
> <EMAIL REMOVED> > wrote:
>
>> Sorry about that, the LinkedIn article didn't copy right, here it is
>> http://lnkd.in/vcvyQz
>>
>> ----- Original Message -----
>> From: "Bryan Garaventa" < <EMAIL REMOVED> >
>> To: "WebAIM Discussion List" < <EMAIL REMOVED> >
>> Sent: Thursday, August 09, 2012 10:19 AM
>> Subject: Re: [WebAIM] Reg typeahead/autocomplete accessibility.
>>
>>
>> >I wouldn't recommend using role=alert for this, because it will
>> >interrupt
>> > speech output. There is an article about this at
>> > The use of role=alert and role=presentation, and the not-so-well known
>> > details about them.
>> > There is also a JavaScript method available in the comments that can be
>> > used
>> > to generate unobtrusive announcement messages that don't cause this to
>> > occur.
>> >
>> > If it's helpful, there is an auto suggestion search field demo at
>> > http://whatsock.com/modules/auto_suggestion_search_field_module/demo.htm
>> >
>> > Personally I favor keeping the use of the arrow keys separate from the
>> > content being controlled, unless the content is actually written in the
>> > field. Otherwise, it's difficult to tell when the content being
>> > announced
>> > is
>> > present or not, and it's difficult to tell when the position is being
>> > moved
>> > or if something else is happening instead.
>> >
>> >
>> > ----- Original Message -----
>> > From: "Ramya Sethuraman" < <EMAIL REMOVED> >
>> > To: < <EMAIL REMOVED> >
>> > Sent: Thursday, August 09, 2012 9:42 AM
>> > Subject: [WebAIM] Reg typeahead/autocomplete accessibility.
>> >
>> >
>> >> Hi,
>> >>
>> >> I am trying to figure out the best way to make a
>> >> typeahead/autocomplete
>> >> feature in a search field accessible while also making it usable with
>> >> screen readers and what I mean by this is, it is possible to set aria
>> >> tags
>> >> to make the screen reader announce every single option in the
>> >> typeahead
>> >> but
>> >> this makes the feature not very usable and I want to reach a good
>> balance
>> >> between the two. So, I have a search field, when the user types a
>> letter,
>> >> a
>> >> list pops up with suggestions with the first suggestion auto selected.
>> If
>> >> the user presses enter, he automatically selects the first item in the
>> >> typeahead. Or he can use his arrow keys to move up/down the dropdown
>> >> list.
>> >> All the while focus remains on the search field so he can ignore the
>> >> autosuggestion and just keep typing. How can I make this accessible?
>> >>
>> >> 1. Since focus remains in the search field at all times, I would have
>> >> to
>> >> use aria alert to let the screen reader know that the first suggestion
>> is
>> >> auto selected and he should press enter to select it. Should I set the
>> >> search field role to combobox so the screen reader user knows he can
>> >> use
>> >> the up/down arrow keys to navigate?
>> >>
>> >> 2. If he continues typing, the autocomplete popup changes but is there
>> >> a
>> >> reason to let the screen reader know about this? I still have the
>> >> alert
>> >> on
>> >> the first selected autocomplete item. Is this sufficient?
>> >>
>> >> Thanks,
>> >>
>> >> Ramya
>> >>
>> >> --
>> >> *I also exist @: http://www.ramyasethuraman.com*
>> >> >> >> >> >> >> >
>> > >> > >> > >>
>> >> >> >>
>
>
>
> --
> *I also exist @: http://www.ramyasethuraman.com*
> > >