E-mail List Archives

You are here: Home > Community > E-mail List Archives > View Thread

Thread: Reg typeahead/autocomplete accessibility.

Number of posts in this thread: 5 (In chronological order)

From: Ramya Sethuraman
Date: Thu, Aug 09 2012 10:42AM
Subject: Reg typeahead/autocomplete accessibility.
No previous message | Next message →

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*

From: Bryan Garaventa
Date: Thu, Aug 09 2012 11:19AM
Subject: Re: Reg typeahead/autocomplete accessibility.
← Previous message | Next message →

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 ADDRESS REMOVED = >
To: < = EMAIL ADDRESS 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*
> > >

From: Bryan Garaventa
Date: Thu, Aug 09 2012 11:56AM
Subject: Re: Reg typeahead/autocomplete accessibility.
← Previous message | Next message →

Sorry about that, the LinkedIn article didn't copy right, here it is
http://lnkd.in/vcvyQz

----- Original Message -----
From: "Bryan Garaventa" < = EMAIL ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> To: < = EMAIL ADDRESS 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*
>> >> >> >
> > >

From: Ramya Sethuraman
Date: Thu, Aug 09 2012 12:05PM
Subject: Re: Reg typeahead/autocomplete accessibility.
← Previous message | Next message →

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 ADDRESS 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 ADDRESS REMOVED = >
> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
> > To: < = EMAIL ADDRESS 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*

From: Bryan Garaventa
Date: Thu, Aug 09 2012 2:42PM
Subject: Re: Reg typeahead/autocomplete accessibility.
← Previous message | No next message

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 ADDRESS REMOVED = >
To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS 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 ADDRESS REMOVED = >
>> To: "WebAIM Discussion List" < = EMAIL ADDRESS 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 ADDRESS REMOVED = >
>> > To: < = EMAIL ADDRESS 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*
> > >