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.