WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible autocomplete / typeahead pattern

for

From: Adam.Lund
Date: Feb 28, 2017 4:50PM

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-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 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.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 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=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>