WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible autocomplete / typeahead pattern

for

From:
Date: Feb 28, 2017 2:20PM

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