E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 3 (In chronological order)

From: Dawn.Igoe
Date: Mon, Feb 09 2015 12:35PM
Subject: Predictive Text Search Functionality
No previous message | Next message →

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

From: Bryan Garaventa
Date: Mon, Feb 09 2015 1:49PM
Subject: Re: Predictive Text Search Functionality
← Previous message | Next message →

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

From: _mallory
Date: Tue, Feb 10 2015 1:00AM
Subject: Re: Predictive Text Search Functionality
← Previous message | No next message

More focussed on the front end, but as a developer I found Marco's
tips page fairly easy to understand.
https://www.marcozehe.de/2014/03/11/easy-aria-tip-7-use-listbox-and-option-roles-when-constructing-autocomplete-lists/

Though I'm going to check out Bryan's links because I don't think I
saw them before.

cheers,
_mallory
On Mon, Feb 09, 2015 at 07:35:05PM +0000, = EMAIL ADDRESS REMOVED = wrote:
> 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
>
> > >