E-mail List Archives

Re: Accessible autocomplete / typeahead pattern

for

From: Birkir R. Gunnarsson
Date: Feb 28, 2017 4:00PM


Check the one at www.statefarm.com
I also got the feeling that Bryan has one, or more than one, over on Whatsock.

If you use the HTML5 list attribute you actually get an almost
accessible autocomplete using HTML alone.
<label for="inp1">Search for something</label>
<input type="text" list="suggestions1" id="inp1">
<datalist id="suggestions1">
<option value="suggestion1">
<option value="suggestion2">
...
</datalist>
The only thing that is missing is a live region that notifies a screen
reader user that results are visible.
Something as simple as
<div aria-live="polite" class="sr-only" id="resVisible"></div>
Then JavaScript can dynamically insert messages such as "results are
available" or "results are no longer available" into this div.
Unfortunately this only works in Firefox (49 and above), partialy
works in Chrome but not at all in IE11, so I don't recommend this as
ready to launch yet, but the signs are encouraging.
Cheers
-B
P.s. by "works" I mean that you can use arrow down to navigate to
visible results, through results, you can use escape to dismiss the
list and you can use enter to select a value and move focus back to
input with that value already populated.


On 2/28/17, Joshua Hori < <EMAIL REMOVED> > wrote:
> 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
>> >>
> > > http://webaim.org/discussion/archives
> > > > > >


--
Work hard. Have fun. Make history.