E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 2 (In chronological order)

From: Nancy Johnson
Date: Mon, Dec 16 2013 9:07AM
Subject: Moving the focus from a list with links to the content area
No previous message | Next message →

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>

From: Birkir R. Gunnarsson
Date: Mon, Dec 16 2013 9:44AM
Subject: Re: Moving the focus from a list with links to the content area
← Previous message | No next message

Hi

This sounds a bit confusing, but it sounds like multiple links are
controlling one area of the page.
From a screen reader perspective it would definitely be best to map
each of these links in the last as tabs (role="tab on the anchor tag),
then set aria-selected property on the active tab (and make sure to
update it via JavaScript in response to user activating that tab via
mouse/keyboard).
Also set an aria-controls attribute on these tab links pointing to the
ID of the content area being updated on the page. This allows screen
reader users to move to that content using screen reader keys.
I would finally add role="region" "navigation" or other suitable ARIA
landmark on that div caontining the JQuery content, along with an
aria-label that clearly marked it as such.

For keyboard only users, it is probably best to move the focus to the
first active element in the updated content area, once the user has
activated one of the list items.

Before JavaScript:
1. Map all links that control content area as tabs, make sure to set
the aria-selected property on the div that is active by default to
true.
2. Set aria-controls on all of these links pointing to the content area.
3. Set appropriate role and aria-label on the content area.
"

In Javascript
User clicks a link in the list.
1. its aria-selected property is set to true (make sure, of course,
that visually it is also clearly indicated which of the tabs is
selected).
2. Focus is moved to the content area.

You may want to consider using role="alertdialog" for the content, but
I have found that it does not add much to the user experience over
focus management and the mapping I described.
This is just based on my understanding of your description, and
without actually looking at the page you are dealing with, this might
not be the best answer, as I may have misunderstood something.

-B
Birkir Gunnarssone
Accessibility SME | Deque Systems


On 12/16/13, Nancy Johnson < = EMAIL ADDRESS REMOVED = > wrote:
> 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>
> > > >


--
Work hard. Have fun. Make history.