WebAIM - Web Accessibility In Mind

E-mail List Archives

Moving the focus from a list with links to the content area

for

From: Nancy Johnson
Date: Dec 16, 2013 9:07AM

I have a question regarding moving the focus from a list with links to
the content area in the following screnario.
Links within a UL going to one AJAX enabled content on right with a
jquery click event to bring in the correct content.

Currently, keyboard user clicks on a link the content area displays,
the user still has to tab through the remaining links to get to the
content area.

The developer is using id='inlinewrapper' to call the correct content via ajax.

Adding live regions: no affect on tabbing, the screen reader was able
to immediately read the content, when I started tabbing, it went back
to the list and finished.

The html is somthing like : second item is active here.

<div class="search-outer">
<ul>
<li>
<a id="abc" href="javascript:void(0)">ABC</a>

</li>
<li>
<a id="def" class="sactive" href="javascript:void(0)">DEF</a>

</li>
<li>
<a id="ghi" href="javascript:void(0)">GHI</a>

</li>
</ul>

<script type="text/javascript">
jQuery(document).ready(function () {
var options_def = {};
options_def.jqueryaction = "anchor";
options_def.id = "csSearch";
options_def.targets = "inlinewrapper";
options_def.href = "SearchSafetyIssues";
options_def.hrefparameter = "partialPage_YN=Y&prodType=def";
options_def.onclick = "menuClick";
jQuery.struts2_jquery.bind(jQuery('#def'),options_def);
});
</script>

div id="inlinewrapper" class="inlinewrapper">
<div id="def">
<h2..header</h2>
two to three input fields
submit.
</div>
</div>