WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: predictive searching on a web page and mouse hovers

for

From: JP Jamous
Date: Oct 14, 2016 8:44AM


Quite interesting. Thank you for sharing this.

-----Original Message-----
From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On Behalf Of Birkir R. Gunnarsson
Sent: Friday, October 14, 2016 8:49 AM
To: WebAIM Discussion List < <EMAIL REMOVED> >
Subject: Re: [WebAIM] predictive searching on a web page and mouse hovers

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.
>
> -----Original Message-----
> From: WebAIM-Forum [mailto: <EMAIL REMOVED> ] On
> Behalf Of Sean Murphy
> Sent: Thursday, October 13, 2016 9:26 PM
> To: WebAIM Discussion List < <EMAIL REMOVED> >
> Subject: [WebAIM] predictive searching on a web page and mouse hovers
>
> All,
>
> From my searching, I haven't been successful in finding a answer to my
> questions.
>
> 1. Google uses and so do some other pages a predictive search functionality.
> As the person types in the information, the search results gets
> automatically updated. Screen reader's on www.google.com
> <http://www.google.com/>; do not handle this. Any one got example code
> or tips to make this style of interactive searching work with screen readers?
>
> 2. Mouse hovers when a user places a mouse pointer on top of an
> graphic, link, paragraph, etc. How can a screen reader or keyboard
> user interact with this? Does a on keyboard event have to be present?
> Some posts I have seen state the use of a mouse hover as I described
> should not be present. I am not sure the best practise here.
>
> Sean
> > > archives at http://webaim.org/discussion/archives
> >
> > > archives at http://webaim.org/discussion/archives
> >


--
Work hard. Have fun. Make history.