E-mail List Archives

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

Thread: Accessible autocomplete / typeahead pattern

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

From: Adam.Lund
Date: Tue, Feb 28 2017 12:09PM
Subject: Accessible autocomplete / typeahead pattern
No previous message | Next message →

Hello everyone, I have been searching for an accessible control that
behaves similarly to Twitter's typeahead or the select2 menu. Whereas a
user can select from a list of options or begin typing, which filters the
list of items based on the input. Select2 claims to be accessible so I
tested select2 with VoiceOver and JAWS 18, but the screen reader does not
report search results in real time, nor allow the user to navigate the
menu items.

I've searched the greater Web and WebAIM archives, and have not found an
example of an accessible autocomplete control.

Have you encountered any in the wild?

Sincerely,
Adam

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. .
Adam Lund
Accessibility Technologist

Thomson Reuters
the answer company

Phone: 651-687-4045
Mobile: 612-867-6185

= EMAIL ADDRESS REMOVED =

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. .

On 2/28/17, 12:36 PM, "WebAIM-Forum on behalf of Angela French"
< = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = >
wrote:

>
>This
>page<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.sbctc.edu_for
>-2Demployers_default.aspx&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSR
>uCSs5Q&r=7shRp1gT1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1gMc
>lr8NYXAq_Fm1HiCKHyZcD0l0&s=QBD_PYcwWEEaTKFI331F8vzXuaq1Y90EgVucQJTAKc8&e>> is a landing page. In its main content area it contains a paragraph of
>>introductory text then three pictures with links to new pages. The
>>three picture-links are "Economic Development", "Employer Grants and
>>Loans" and "Centers of Excellence". The picture and the text are in
>>separate divs and these are wrapped in the anchor tag so that both the
>>picture and the text becomes clickable.
>
>When I listed with NVDA the alt text for the three pictures sounds
>cumbersome . Since the picture is just basically "eye candy" for the
>navigational link, I'm inclined to provide a null alt attribute.
>
>I would appreciate your opinion.
>
>
>
>Angela French
>Internet/Intranet Specialist
>Washington State Board for Community and Technical Colleges
>360-704-4316
> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>www.sbctc.edu<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.sbct
>c.edu_&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7shRp1gT1L
>o1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1gMclr8NYXAq_Fm1HiCKHyZ
>cD0l0&s=frtZOEMcPYR9hdPQvzxLAEzYRP_OTFjzGskD37AyTnA&e= >
>
>>>https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=CwI
>GaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7shRp1gT1Lo1Xh4DghwcV2
>BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1gMclr8NYXAq_Fm1HiCKHyZcD0l0&s=MfBQ
>GQF87hSUx_taqpmCX_SrUL5bjC7Y0YdrzM6Bxyo&e>List archives at
>https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_
>archives&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7shRp1gT
>1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1gMclr8NYXAq_Fm1HiCKH
>yZcD0l0&s=T25_UIy7ROUedmC9wkxdAOX5lE-6mNAwjHJQSAKJzKM&e>

From: Date: Tue, Feb 28 2017 2:20PM
Subject: Re: Accessible autocomplete / typeahead pattern
← Previous message | Next message →

On 28/02/2017 11:09, = EMAIL ADDRESS REMOVED = wrote:
> Hello everyone, I have been searching for an accessible control that
> behaves similarly to Twitter's typeahead or the select2 menu. Whereas a
> user can select from a list of options or begin typing, which filters the
> list of items based on the input. Select2 claims to be accessible so I
> tested select2 with VoiceOver and JAWS 18, but the screen reader does not
> report search results in real time, nor allow the user to navigate the
> menu items.

There is one here that was developed by Gez Lemon (though this demo is
hosted in my Github space):
http://ljwatson.github.io/design-patterns/autocomplete/index.html

We've used it as the basis for a similar widget that will be used on the
Gov.UK platform - and this will be available openly when it's been
tested and deployed.

Léonie
--
@LeonieWatson tink.uk Carpe diem

>
> I've searched the greater Web and WebAIM archives, and have not found an
> example of an accessible autocomplete control.
>
> Have you encountered any in the wild?
>
> Sincerely,
> Adam
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> . .
> Adam Lund
> Accessibility Technologist
>
> Thomson Reuters
> the answer company
>
> Phone: 651-687-4045
> Mobile: 612-867-6185
>
> = EMAIL ADDRESS REMOVED =
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> . .
>
>
>
> On 2/28/17, 12:36 PM, "WebAIM-Forum on behalf of Angela French"
> < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = >
> wrote:
>
>>
>> This
>> page<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.sbctc.edu_for
>> -2Demployers_default.aspx&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSR
>> uCSs5Q&r=7shRp1gT1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1gMc
>> lr8NYXAq_Fm1HiCKHyZcD0l0&s=QBD_PYcwWEEaTKFI331F8vzXuaq1Y90EgVucQJTAKc8&e>>> is a landing page. In its main content area it contains a paragraph of
>>> introductory text then three pictures with links to new pages. The
>>> three picture-links are "Economic Development", "Employer Grants and
>>> Loans" and "Centers of Excellence". The picture and the text are in
>>> separate divs and these are wrapped in the anchor tag so that both the
>>> picture and the text becomes clickable.
>>
>> When I listed with NVDA the alt text for the three pictures sounds
>> cumbersome . Since the picture is just basically "eye candy" for the
>> navigational link, I'm inclined to provide a null alt attribute.
>>
>> I would appreciate your opinion.
>>
>>
>>
>> Angela French
>> Internet/Intranet Specialist
>> Washington State Board for Community and Technical Colleges
>> 360-704-4316
>> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>> www.sbctc.edu<;https://urldefense.proofpoint.com/v2/url?u=http-3A__www.sbct
>> c.edu_&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7shRp1gT1L
>> o1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1gMclr8NYXAq_Fm1HiCKHyZ
>> cD0l0&s=frtZOEMcPYR9hdPQvzxLAEzYRP_OTFjzGskD37AyTnA&e= >
>>
>> >> >> https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=CwI
>> GaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7shRp1gT1Lo1Xh4DghwcV2
>> BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1gMclr8NYXAq_Fm1HiCKHyZcD0l0&s=MfBQ
>> GQF87hSUx_taqpmCX_SrUL5bjC7Y0YdrzM6Bxyo&e>> List archives at
>> https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_
>> archives&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7shRp1gT
>> 1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1gMclr8NYXAq_Fm1HiCKH
>> yZcD0l0&s=T25_UIy7ROUedmC9wkxdAOX5lE-6mNAwjHJQSAKJzKM&e>> >
> > > > >

From: Joshua Hori
Date: Tue, Feb 28 2017 2:58PM
Subject: Re: Accessible autocomplete / typeahead pattern
← Previous message | Next message →

Harvard also has an example up to consider: http://accessibility.huit.harvard.edu/%E2%9C%8E-technique-aria-autocomplete

Joshua

From: Birkir R. Gunnarsson
Date: Tue, Feb 28 2017 4:00PM
Subject: Re: Accessible autocomplete / typeahead pattern
← Previous message | Next message →

Check the one at www.statefarm.com
I also got the feeling that Bryan has one, or more than one, over on Whatsock.

If you use the HTML5 list attribute you actually get an almost
accessible autocomplete using HTML alone.
<label for="inp1">Search for something</label>
<input type="text" list="suggestions1" id="inp1">
<datalist id="suggestions1">
<option value="suggestion1">
<option value="suggestion2">
...
</datalist>
The only thing that is missing is a live region that notifies a screen
reader user that results are visible.
Something as simple as
<div aria-live="polite" class="sr-only" id="resVisible"></div>
Then JavaScript can dynamically insert messages such as "results are
available" or "results are no longer available" into this div.
Unfortunately this only works in Firefox (49 and above), partialy
works in Chrome but not at all in IE11, so I don't recommend this as
ready to launch yet, but the signs are encouraging.
Cheers
-B
P.s. by "works" I mean that you can use arrow down to navigate to
visible results, through results, you can use escape to dismiss the
list and you can use enter to select a value and move focus back to
input with that value already populated.

On 2/28/17, Joshua Hori < = EMAIL ADDRESS REMOVED = > wrote:
> Harvard also has an example up to consider:
> http://accessibility.huit.harvard.edu/%E2%9C%8E-technique-aria-autocomplete
>
> Joshua
>
>

From: Adam.Lund
Date: Tue, Feb 28 2017 4:50PM
Subject: Re: Accessible autocomplete / typeahead pattern
← Previous message | Next message →

Thank you Léonie & Josh - Both provided an example of exactly the kind of
interaction I was trying to find.

The widget reports the state of results as user types, along with the AT
reading the input. It seems like it should be an easy pattern to create
but the interaction is very complex.

I'll be digging into these examples in the coming days. I hope you
consider adding it to github as open source, as there is a strong need for
such a control right now.

Thanks again!

Adam

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. .
Adam Lund
Accessibility Technologist

Thomson Reuters
the answer company

Phone: 651-687-4045
Mobile: 612-867-6185

= EMAIL ADDRESS REMOVED =

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
. .

On 2/28/17, 3:20 PM, "WebAIM-Forum on behalf of Léonie Watson"
< = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = > wrote:

>
>On 28/02/2017 11:09, = EMAIL ADDRESS REMOVED = wrote:
>> Hello everyone, I have been searching for an accessible control that
>> behaves similarly to Twitter's typeahead or the select2 menu. Whereas a
>> user can select from a list of options or begin typing, which filters
>>the
>> list of items based on the input. Select2 claims to be accessible so I
>> tested select2 with VoiceOver and JAWS 18, but the screen reader does
>>not
>> report search results in real time, nor allow the user to navigate the
>> menu items.
>
>There is one here that was developed by Gez Lemon (though this demo is
>hosted in my Github space):
>https://urldefense.proofpoint.com/v2/url?u=http-3A__ljwatson.github.io_des
>ign-2Dpatterns_autocomplete_index.html&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hv
>vvzvGv0FLoWSRuCSs5Q&r=7shRp1gT1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&m=-iFwIq
>uX_WNtFvEVunu5XPJwxATX0CNks6kZkAGHXdA&s=HbNYv4g48o4OFzHIaPTGURu6itxvR2YC1z
>GOEODIeZg&e>
>We've used it as the basis for a similar widget that will be used on the
>Gov.UK platform - and this will be available openly when it's been
>tested and deployed.
>
>Léonie
>--
>@LeonieWatson tink.uk Carpe diem
>
>>
>> I've searched the greater Web and WebAIM archives, and have not found an
>> example of an accessible autocomplete control.
>>
>> Have you encountered any in the wild?
>>
>> Sincerely,
>> Adam
>>
>> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
>>.
>> . .
>> Adam Lund
>> Accessibility Technologist
>>
>> Thomson Reuters
>> the answer company
>>
>> Phone: 651-687-4045
>> Mobile: 612-867-6185
>>
>> = EMAIL ADDRESS REMOVED =
>>
>> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
>>.
>> . .
>>
>>
>>
>> On 2/28/17, 12:36 PM, "WebAIM-Forum on behalf of Angela French"
>> < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = >
>> wrote:
>>
>>>
>>> This
>>>
>>>page<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.sbctc.edu_f
>>>or
>>>
>>>-2Demployers_default.aspx&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoW
>>>SR
>>>
>>>uCSs5Q&r=7shRp1gT1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1g
>>>Mc
>>>
>>>lr8NYXAq_Fm1HiCKHyZcD0l0&s=QBD_PYcwWEEaTKFI331F8vzXuaq1Y90EgVucQJTAKc8&e
>>>>>>> is a landing page. In its main content area it contains a paragraph
>>>>of
>>>> introductory text then three pictures with links to new pages. The
>>>> three picture-links are "Economic Development", "Employer Grants and
>>>> Loans" and "Centers of Excellence". The picture and the text are in
>>>> separate divs and these are wrapped in the anchor tag so that both the
>>>> picture and the text becomes clickable.
>>>
>>> When I listed with NVDA the alt text for the three pictures sounds
>>> cumbersome . Since the picture is just basically "eye candy" for the
>>> navigational link, I'm inclined to provide a null alt attribute.
>>>
>>> I would appreciate your opinion.
>>>
>>>
>>>
>>> Angela French
>>> Internet/Intranet Specialist
>>> Washington State Board for Community and Technical Colleges
>>> 360-704-4316
>>> = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
>>>
>>>www.sbctc.edu<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.sb
>>>ct
>>>
>>>c.edu_&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7shRp1gT
>>>1L
>>>
>>>o1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1gMclr8NYXAq_Fm1HiCKH
>>>yZ
>>> cD0l0&s=frtZOEMcPYR9hdPQvzxLAEzYRP_OTFjzGskD37AyTnA&e= >
>>>
>>> >>> >>>
>>>https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=C
>>>wI
>>>
>>>GaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7shRp1gT1Lo1Xh4Dghwc
>>>V2
>>>
>>>BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1gMclr8NYXAq_Fm1HiCKHyZcD0l0&s=Mf
>>>BQ
>>> GQF87hSUx_taqpmCX_SrUL5bjC7Y0YdrzM6Bxyo&e>>> List archives at
>>>
>>>https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussio
>>>n_
>>>
>>>archives&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7shRp1
>>>gT
>>>
>>>1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1gMclr8NYXAq_Fm1HiC
>>>KH
>>> yZcD0l0&s=T25_UIy7ROUedmC9wkxdAOX5lE-6mNAwjHJQSAKJzKM&e>>> >>
>> >> >>https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=Cw
>>IGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7shRp1gT1Lo1Xh4Dghwc
>>V2BuS_kAFTDSg7mIZ78wg-E&m=-iFwIquX_WNtFvEVunu5XPJwxATX0CNks6kZkAGHXdA&s=l
>>hZGifYzUIVnJk2u9SFqTv4z3sQBYH3Bh8Hd3A_8W3k&e>> List archives at
>>https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion
>>_archives&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7shRp1
>>gT1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&m=-iFwIquX_WNtFvEVunu5XPJwxATX0CNks
>>6kZkAGHXdA&s=LBaXIvL5M8L40rwbm_2w_OHabD9WAdBHs8NpNdNfwGs&e>> >>
>>>https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&d=CwI
>GaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7shRp1gT1Lo1Xh4DghwcV2
>BuS_kAFTDSg7mIZ78wg-E&m=-iFwIquX_WNtFvEVunu5XPJwxATX0CNks6kZkAGHXdA&s=lhZG
>ifYzUIVnJk2u9SFqTv4z3sQBYH3Bh8Hd3A_8W3k&e>List archives at
>https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussion_
>archives&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7shRp1gT
>1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&m=-iFwIquX_WNtFvEVunu5XPJwxATX0CNks6kZ
>kAGHXdA&s=LBaXIvL5M8L40rwbm_2w_OHabD9WAdBHs8NpNdNfwGs&e>

From: Shane Anderson
Date: Wed, Mar 01 2017 2:36PM
Subject: Re: Accessible autocomplete / typeahead pattern
← Previous message | Next message →

Southwest Airlines has one that works relatively well.

https://www.southwest.com/flight/

Regards
Shane Anderson

On Tue, Feb 28, 2017 at 2:09 PM, < = EMAIL ADDRESS REMOVED = > wrote:

> Hello everyone, I have been searching for an accessible control that
> behaves similarly to Twitter's typeahead or the select2 menu. Whereas a
> user can select from a list of options or begin typing, which filters the
> list of items based on the input. Select2 claims to be accessible so I
> tested select2 with VoiceOver and JAWS 18, but the screen reader does not
> report search results in real time, nor allow the user to navigate the
> menu items.
>
> I've searched the greater Web and WebAIM archives, and have not found an
> example of an accessible autocomplete control.
>
> Have you encountered any in the wild?
>
> Sincerely,
> Adam
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> . .
> Adam Lund
> Accessibility Technologist
>
> Thomson Reuters
> the answer company
>
> Phone: 651-687-4045
> Mobile: 612-867-6185
>
> = EMAIL ADDRESS REMOVED =
>
> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> . .
>
>
>
> On 2/28/17, 12:36 PM, "WebAIM-Forum on behalf of Angela French"
> < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = >
> wrote:
>
> >
> >This
> >page<https://urldefense.proofpoint.com/v2/url?u=http-
> 3A__www.sbctc.edu_for
> >-2Demployers_default.aspx&d=CwIGaQ&c=4ZIZThykDLcoWk-
> GVjSLm9hvvvzvGv0FLoWSR
> >uCSs5Q&r=7shRp1gT1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&m> CbVh5BKMXLQCWX-1gMc
> >lr8NYXAq_Fm1HiCKHyZcD0l0&s=QBD_PYcwWEEaTKFI331F8vzXuaq1Y90EgVucQJTAKc8&e> >> is a landing page. In its main content area it contains a paragraph of
> >>introductory text then three pictures with links to new pages. The
> >>three picture-links are "Economic Development", "Employer Grants and
> >>Loans" and "Centers of Excellence". The picture and the text are in
> >>separate divs and these are wrapped in the anchor tag so that both the
> >>picture and the text becomes clickable.
> >
> >When I listed with NVDA the alt text for the three pictures sounds
> >cumbersome . Since the picture is just basically "eye candy" for the
> >navigational link, I'm inclined to provide a null alt attribute.
> >
> >I would appreciate your opinion.
> >
> >
> >
> >Angela French
> >Internet/Intranet Specialist
> >Washington State Board for Community and Technical Colleges
> >360-704-4316
> > = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> >www.sbctc.edu<https://urldefense.proofpoint.com/v2/
> url?u=http-3A__www.sbct
> >c.edu_&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&
> r=7shRp1gT1L
> >o1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1gMclr8NYXAq_
> Fm1HiCKHyZ
> >cD0l0&s=frtZOEMcPYR9hdPQvzxLAEzYRP_OTFjzGskD37AyTnA&e= >
> >
> >> >> >https://urldefense.proofpoint.com/v2/url?u=http-
> 3A__list.webaim.org_&d=CwI
> >GaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&
> r=7shRp1gT1Lo1Xh4DghwcV2
> >BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1gMclr8NYXAq_
> Fm1HiCKHyZcD0l0&s=MfBQ
> >GQF87hSUx_taqpmCX_SrUL5bjC7Y0YdrzM6Bxyo&e> >List archives at
> >https://urldefense.proofpoint.com/v2/url?u=http-
> 3A__webaim.org_discussion_
> >archives&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&
> r=7shRp1gT
> >1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1gMclr8NYXAq_
> Fm1HiCKH
> >yZcD0l0&s=T25_UIy7ROUedmC9wkxdAOX5lE-6mNAwjHJQSAKJzKM&e> >>
> > > > >

From: Date: Wed, Mar 01 2017 2:51PM
Subject: Re: Accessible autocomplete / typeahead pattern
← Previous message | Next message →

There's also the jQuery UI autocomplete widget:
http://jqueryui.com/autocomplete/

On Wed, Mar 1, 2017 at 4:36 PM, Shane Anderson < = EMAIL ADDRESS REMOVED = >
wrote:

> Southwest Airlines has one that works relatively well.
>
> https://www.southwest.com/flight/
>
> Regards
> Shane Anderson
>
>
> On Tue, Feb 28, 2017 at 2:09 PM, < = EMAIL ADDRESS REMOVED = > wrote:
>
> > Hello everyone, I have been searching for an accessible control that
> > behaves similarly to Twitter's typeahead or the select2 menu. Whereas a
> > user can select from a list of options or begin typing, which filters the
> > list of items based on the input. Select2 claims to be accessible so I
> > tested select2 with VoiceOver and JAWS 18, but the screen reader does not
> > report search results in real time, nor allow the user to navigate the
> > menu items.
> >
> > I've searched the greater Web and WebAIM archives, and have not found an
> > example of an accessible autocomplete control.
> >
> > Have you encountered any in the wild?
> >
> > Sincerely,
> > Adam
> >
> > . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> > . .
> > Adam Lund
> > Accessibility Technologist
> >
> > Thomson Reuters
> > the answer company
> >
> > Phone: 651-687-4045
> > Mobile: 612-867-6185
> >
> > = EMAIL ADDRESS REMOVED =
> >
> > . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
> > . .
> >
> >
> >
> > On 2/28/17, 12:36 PM, "WebAIM-Forum on behalf of Angela French"
> > < = EMAIL ADDRESS REMOVED = on behalf of = EMAIL ADDRESS REMOVED = >
> > wrote:
> >
> > >
> > >This
> > >page<https://urldefense.proofpoint.com/v2/url?u=http-
> > 3A__www.sbctc.edu_for
> > >-2Demployers_default.aspx&d=CwIGaQ&c=4ZIZThykDLcoWk-
> > GVjSLm9hvvvzvGv0FLoWSR
> > >uCSs5Q&r=7shRp1gT1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&m> > CbVh5BKMXLQCWX-1gMc
> > >lr8NYXAq_Fm1HiCKHyZcD0l0&s=QBD_PYcwWEEaTKFI331F8vzXuaq1Y90EgV
> ucQJTAKc8&e> > >> is a landing page. In its main content area it contains a paragraph
> of
> > >>introductory text then three pictures with links to new pages. The
> > >>three picture-links are "Economic Development", "Employer Grants and
> > >>Loans" and "Centers of Excellence". The picture and the text are in
> > >>separate divs and these are wrapped in the anchor tag so that both the
> > >>picture and the text becomes clickable.
> > >
> > >When I listed with NVDA the alt text for the three pictures sounds
> > >cumbersome . Since the picture is just basically "eye candy" for the
> > >navigational link, I'm inclined to provide a null alt attribute.
> > >
> > >I would appreciate your opinion.
> > >
> > >
> > >
> > >Angela French
> > >Internet/Intranet Specialist
> > >Washington State Board for Community and Technical Colleges
> > >360-704-4316
> > > = EMAIL ADDRESS REMOVED = <mailto: = EMAIL ADDRESS REMOVED = >
> > >www.sbctc.edu<https://urldefense.proofpoint.com/v2/
> > url?u=http-3A__www.sbct
> > >c.edu_&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&
> > r=7shRp1gT1L
> > >o1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1gMclr8NYXAq_
> > Fm1HiCKHyZ
> > >cD0l0&s=frtZOEMcPYR9hdPQvzxLAEzYRP_OTFjzGskD37AyTnA&e= >
> > >
> > >> > >> > >https://urldefense.proofpoint.com/v2/url?u=http-
> > 3A__list.webaim.org_&d=CwI
> > >GaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&
> > r=7shRp1gT1Lo1Xh4DghwcV2
> > >BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1gMclr8NYXAq_
> > Fm1HiCKHyZcD0l0&s=MfBQ
> > >GQF87hSUx_taqpmCX_SrUL5bjC7Y0YdrzM6Bxyo&e> > >List archives at
> > >https://urldefense.proofpoint.com/v2/url?u=http-
> > 3A__webaim.org_discussion_
> > >archives&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&
> > r=7shRp1gT
> > >1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mÃ‹Vh5BKMXLQCWX-1gMclr8NYXAq_
> > Fm1HiCKH
> > >yZcD0l0&s=T25_UIy7ROUedmC9wkxdAOX5lE-6mNAwjHJQSAKJzKM&e> > >> >
> > > > > > > > > >
> > > > >

From: Bryan Garaventa
Date: Sat, Mar 04 2017 8:06PM
Subject: Re: Accessible autocomplete / typeahead pattern
← Previous message | No next message

Hi,
The control type that you are referring to is known as an ARIA Combobox control, and there are some very strict implementation details to be aware of when building these that are good to know if in advance. You can read about all of these at
https://www.ssbbartgroup.com/blog/differences-aria-1-0-1-1-changes-rolecombobox/

This article also includes links to live examples for testing plus relevant GitHub archives as reusable components.

All the best,
Bryan

Bryan Garaventa
Accessibility Fellow
SSB BART Group, Inc.
= EMAIL ADDRESS REMOVED =
415.624.2709 (o)
www.SSBBartGroup.com