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 7:23AM

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