WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Predictive Text Search Functionality

for

From: Bryan Garaventa
Date: Feb 9, 2015 1:49PM

Hi,
It sounds like what you are referring to is an auto-suggest combobox widget. E.G ARIA Combobox
http://www.w3.org/TR/wai-aria/roles#combobox

There are live demos of this functionality available at

1 Form with overlays:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20and%20Readonly)/demo.htm
(Where the State field opens an autosuggest list when you start typing, and the Country field has an arrow toggle to pull down the
attached list)

2 Simple with overlay:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20with%20Substring%20Match
)/demo.htm
(Where the edit field matches substrings to populate automatic suggestions.)

3 Simple with static inline rendering:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Native%20Inputs,%20Editable%20with%20Word%20Match)/dem
o.htm
(Where the typing of full words like 'modem' or 'printer' will automatically match list items; using an inline display instead of a
layer)

4 Simulated with toggleable overlay:
http://whatsock.com/tsg/Coding%20Arena/ARIA%20Comboboxes/ARIA%20Comboboxes%20(Simulated,%20Readonly)/demo.htm
(Where the simulated button opens a language dropdown when clicked or tapped, which can then be scrolled through)

Also, the following WAI discussion thread outlines the various principles and coding processes needed to make this work across
desktop and mobile.
http://lists.w3.org/Archives/Public/public-pfwg/2014Nov/0205.html

All the best,
Bryan

-----Original Message-----
From: <EMAIL REMOVED> [mailto: <EMAIL REMOVED> ] On Behalf Of <EMAIL REMOVED>
Sent: Monday, February 09, 2015 11:35 AM
To: <EMAIL REMOVED>
Subject: [WebAIM] Predictive Text Search Functionality

Hello everyone.
A question came up regarding coding predictive text for a search function to ensure accessibility. For example, when a user is
entering an airport name such as "San Francisco" and as they type "San" results for "San Jose" or "San Juan" may appear in addition
to "San Francisco."
We have outside vendors developing a website for us and we are trying to ensure it is fully accessible. However, this is one
question we didn't have an answer for them.
Is anyone aware of what coding should be done or avoided to ensure the predictive text functionality is accessible? Any assistance
will be greatly appreciated.

Thanks and best regards,
Dawn