WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Accessible autocomplete / typeahead pattern

for

From: Shane Anderson
Date: Mar 1, 2017 2:36PM

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