WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: predictive searching on a web page and mouse hovers

for

From: Birkir R. Gunnarsson
Date: Oct 14, 2016 7:48AM

Bryan has a great collection of examples.
You can head on over to http://www.statefarm.com to see a similar widget.
The markup is actually a little more complicated.
The key elements are:
1. Make sure users knows this type of functionality is associated with
your search.
* use role="combobox" in accordance with the pattern, or just use
aria-haspopup="true" on the input field.
* You may also want to use aria-describedby pointing to a short
sentence saying something like "when suggestions are available, press
arrow down to explore".
Then you can keep a live region span that you populate with info when
suggestions are available.
<span aria-live="polite" id="ls"></span>
Then you have to write JavaScript to display suggestions and handle
the keyboard navigation.

But, wait, good nes on the horizon:
You can use the HTML5 datalist attribute with an input element to have
the browser do most of I.
<label for="inp1">Famous grunge bands</label>
<input type="text" id="inp1" list="lGrunge">
<datalist id="lGrunge">
<option value="Alice in Chains">
<option value="Stone Temple Pilots">
<option value="Pearl Jam">
<option value="nirvana">
</datalist>

If you open this in Firefox and type in "A", then press arrow down,
you will see "Alicein Chains" suggested. If you press enter, you
populate the search field with that.
You jus need live regions to notify screen reader users when results
are available.
IE11 oes not support this, not sure about Chrome, but I think so.



On 10/14/16, JP Jamous < <EMAIL REMOVED> > wrote:
> Sean,
>
> As far as your first question, I have not implemented anything like that but
> what you are describing is AJAX. The text box populates like Windows search
> and Run dialog box.
>
> What comes to mind is the following.
>
> 1. This is a live region
> 2. It populates based onkeydown or onkeyup
>
> Therefore, role="alert" and aria-alive would have to be used on the text
> box.
>
> I am going to take a stab at the code. Bear in mind that I just walked into
> the office and don't have enough cafean in my system. The brain cells are
> still malfunctioning. :-)
>
> <label for="search-box">
> Please enter your search
> </label>
> <input type="text" id="search-box" onkeyup="checkLiveRegion();" />
> Here is the javascript function.
> function checkLiveRegion() {
> var searchTextBox = document.getElementById(' search-box');
> searchTextBox.setAttribute("role", "alert");
> searchTextBox.setAttribute("aria-live", " polite");
> /*
> I made it polite in case the user types another letter. It will allow the SR
> to speak the next typed letter.
> Whenever a key is released, the JS function fires up. This allows AJAX to
> populate before the live region is spoken.
> There might be a need to removeAttribute, but you can identify that through
> trial and error.
> */
> }
>
> Sorry that I don't have any tested and working samples to send you. I just
> wanted to help by guiding you through the code logic.
>
>