HTML5 Top Nav Cursor Focus when Searching (Accessibility)

[M_Mercer2015]

Our output is HTML5 top navigation. When you search for something the "results-heading" displays the number of results found, for example, "Your search for "X" returned 4 result(s)." and the cursor focus is on the first result in the list. When you press the TAB key the cursor focus navigates to the next result in the list etc. until it wraps up to the URL. If you put the cursor into the Search field and press the TAB key, cursor focus goes directly to the first result in the list.

At no point does it stop on the "results-heading." As a result a screen reader user doesn't get the results-heading information. This is especially problematic if the search returned 0 results. I would think that not providing this critical information is not 508 compliant.

I was told that the results-heading is generated after runtime and is not something to can add to the tab loop or force the cursor to focus on it first instead of the first result in the list (if any).

Is there a way around this? Isn't the text "Your search for " static? Only the query text and # returned being generate on the fly? So couldn't you force the cursor to focus on that?

Monica

[M_Mercer2015]

We were able to get it to read by placing the following in the Master Page:

Code: Select all

<script type="text/javascript">
			var pageName = "Search.htm";
			var className = "results-heading";
			if (window.location.pathname.split('/').reverse()[0] === pageName) {
			var el = document.getElementById(className);
			if (el){
				el.setAttribute("aria-live", "assertive");
				el.setAttribute("aria-atomic", "true");
			}
		} 
		</script>

It's successful because now the results heading is read. However, it's read twice, the first time it reads the previous current value and the second time it reads the new current value which is what we want screen reader users to hear. It's not perfect but it's better than the results heading not being read at all.