WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible autocomplete / typeahead pattern

for

From: Bryan Garaventa
Date: Mar 4, 2017 8:06PM

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 REMOVED>
415.624.2709 (o)
www.SSBBartGroup.com


-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of <EMAIL REMOVED>
Sent: Tuesday, February 28, 2017 3:51 PM
To: <EMAIL REMOVED> ; <EMAIL REMOVED> ; <EMAIL REMOVED>
Subject: Re: [WebAIM] Accessible autocomplete / typeahead pattern

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 REMOVED>

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




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

>
>On 28/02/2017 11:09, <EMAIL 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-GVjSLm
>9hv
>vvzvGv0FLoWSRuCSs5Q&r=7shRp1gT1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&m=-iF
>wIq
>uX_WNtFvEVunu5XPJwxATX0CNks6kZkAGHXdA&s=HbNYv4g48o4OFzHIaPTGURu6itxvR2Y
>C1z
>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 REMOVED>
>>
>> . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
>>.
>> . .
>>
>>
>>
>> On 2/28/17, 12:36 PM, "WebAIM-Forum on behalf of Angela French"
>> < <EMAIL REMOVED> on behalf of <EMAIL REMOVED> >
>> wrote:
>>
>>>
>>> This
>>>
>>>page<https://urldefense.proofpoint.com/v2/url?u=http-3A__www.sbctc.ed
>>>u_f
>>>or
>>>
>>>-2Demployers_default.aspx&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0F
>>>LoW
>>>SR
>>>
>>>uCSs5Q&r=7shRp1gT1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mËVh5BKMXLQCWX
>>>-1g
>>>Mc
>>>
>>>lr8NYXAq_Fm1HiCKHyZcD0l0&s=QBD_PYcwWEEaTKFI331F8vzXuaq1Y90EgVucQJTAKc
>>>8&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 REMOVED> <mailto: <EMAIL REMOVED> >
>>>
>>>www.sbctc.edu<https://urldefense.proofpoint.com/v2/url?u=http-3A__www
>>>.sb
>>>ct
>>>
>>>c.edu_&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7shRp
>>>1gT
>>>1L
>>>
>>>o1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mËVh5BKMXLQCWX-1gMclr8NYXAq_Fm1Hi
>>>CKH
>>>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=7shRp1gT1Lo1Xh4Dg
>>>hwc
>>>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_discus
>>>sio
>>>n_
>>>
>>>archives&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7sh
>>>Rp1
>>>gT
>>>
>>>1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mËVh5BKMXLQCWX-1gMclr8NYXAq_Fm1
>>>HiC
>>>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=7shRp1gT1Lo1Xh4Dg
>>hwc
>>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_discuss
>>ion
>>_archives&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7sh
>>Rp1
>>gT1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&m=-iFwIquX_WNtFvEVunu5XPJwxATX0C
>>Nks 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=7shRp1gT1Lo1Xh4Dghw
>cV2
>BuS_kAFTDSg7mIZ78wg-E&m=-iFwIquX_WNtFvEVunu5XPJwxATX0CNks6kZkAGHXdA&s=l
>hZG ifYzUIVnJk2u9SFqTv4z3sQBYH3Bh8Hd3A_8W3k&e>List archives at
>https://urldefense.proofpoint.com/v2/url?u=http-3A__webaim.org_discussi
>on_
>archives&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7shRp
>1gT
>1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&m=-iFwIquX_WNtFvEVunu5XPJwxATX0CNks
>6kZ kAGHXdA&s=LBaXIvL5M8L40rwbm_2w_OHabD9WAdBHs8NpNdNfwGs&e>