WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible autocomplete / typeahead pattern

for

From: Joshua Hori
Date: Feb 28, 2017 2:58PM

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

Joshua

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Léonie Watson
Sent: Tuesday, February 28, 2017 1:20 PM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] Accessible autocomplete / typeahead pattern


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):
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 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_for
>> -2Demployers_default.aspx&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0F
>> LoWSR
>> uCSs5Q&r=7shRp1gT1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mËVh5BKMXLQCWX
>> -1gMc
>> 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
>> .sbct
>> c.edu_&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7shRp
>> 1gT1L
>> o1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mËVh5BKMXLQCWX-1gMclr8NYXAq_Fm1Hi
>> CKHyZ cD0l0&s=frtZOEMcPYR9hdPQvzxLAEzYRP_OTFjzGskD37AyTnA&e= >
>>
>> >> >> https://urldefense.proofpoint.com/v2/url?u=http-3A__list.webaim.org_&
>> d=CwI
>> GaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7shRp1gT1Lo1Xh4Dg
>> hwcV2
>> 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_discus
>> sion_
>> archives&d=CwIGaQ&c=4ZIZThykDLcoWk-GVjSLm9hvvvzvGv0FLoWSRuCSs5Q&r=7sh
>> Rp1gT
>> 1Lo1Xh4DghwcV2BuS_kAFTDSg7mIZ78wg-E&mËVh5BKMXLQCWX-1gMclr8NYXAq_Fm1
>> HiCKH yZcD0l0&s=T25_UIy7ROUedmC9wkxdAOX5lE-6mNAwjHJQSAKJzKM&e>> >
> > > archives at http://webaim.org/discussion/archives
> >