AJAX and accessibility: focus or tab index on active element

Question

I am currently developing an AJAX application which has to be accessible (WGAG 2.0, AA).

I am testing my application with a screen reader (Voice Over for now, on Mac Os X).

The navigations consists of a series of buttons. When the user click on a button, the javascript check if the content has been added to the page, if not, it performs an AJAX call, append a new div to the page, hide previous elements and display the new content, which works fine.

The issue I have is I want the user to go directly to the content when the button has been pressed, so the person can read the content directly instead of leaving the cursor at the button (so for now, when the client press the button, the cursor stay on the button, instead of reading the content that has been loader).

I tried:

$(id).attr("tabindex",-1).focus();

and

$(id).focus();

where id is the variable that contains the id value (with the right selector '#').

It does not work very well, I think this is because at the second click on a button, two elements have the tabindex set to -1, but I am not sure.

I am wondering if someone know which approach I should use ?

UPDATE **

There are 2 places in the same page (AJAX application) where I need the feature, the first part is a widget where setting tabindex to -1 works just fine:

PLACE I

html

<div id="audience-list" class="with-shadow">
    <div id="group-links">
        <div id="confirm-dialog" class="toolBar">
            <button id="cancelBtn">
                Cancel
            </button>
            <button value="group-1" class="highlighted" id="confirmBtn">
                Confirm
            </button>
        </div>
        <div class="d4p-no-ajax group-link selected">
            <div class="span-4 prepend-top">
                <div class="box square with-outset with-large-radius">
                    <div id="apuo" role="button" class="choose-group-button">
                        <h2>My group</h2>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

javascript (from what I learnt yesterday, I should replace the click function by on, will do it, but now this is working just fine). When the user click on the button, he is send to the div that holds the buttons cancel and confirm. This works just fine!

$(".choose-group-button").click(function(e){

    $('#confirm-dialog').addClass('enabled').attr("tabindex",-1).focus();

});

PLACE II, just do not work

html: I tried different scenarios with links and buttons with no more chance. When you click on a link or a button, you should tabindex to the div referenced in the href (here is the dom content, the anchors are modified #avantages -> #/avantages has been modified) or to the div with ID content-container

<div>

    <div id="ico-avantages" class="box box-ico square">
        <span class="ico"></span>
        <a id="d4p-link15" href="#/avantages">
            Avantages sociaux 
        </a>
    </div>

    ...

    <div class="clear">
    </div>
</div>
<div id="content-container">
    <div id="avantages">
    ...
    </div>
    ...
</div>

JAVASCRIPT

$('.box-ico a').each(function(){
    $(this).click(function(){
        $('#content-container').attr('tabindex', -1).focus();     
    });
});

The tabindex is set to -1, the screen scroll to the div, but the screen reader in this case stay at the link level whereas in place 1 on the same page, it works just fine. I am wondering now if there are some more specific conditions that must apply for a div in order to receive focus.

might be useful: http://stackoverflow.com/questions/1599660/which-html-elements-can-receive-focus — palindrom, Mar 05 '13 at 15:46
I tried to set a tabindex on all elements before using focus() and it does now work. It seems that the quote 'Any element with a tabindex' should be able to receive focus is not always true, at least in Safari. The thing is it that works once, but not twice. Thank you again. B. — Bertrand, Mar 05 '13 at 16:18
`

My group
` is not valid. Buttons cannot contain headings. — Ryan B, Mar 06 '13 at 15:36
@Ryan Thank your for taking time to look at the code. Buttons cannot contain headings even if this is a div with role="button"? In any case this code is in phase I of my description and works fine. My issue is that I cannot reproduce the behavior in phase II with either links or buttons. — Bertrand, Mar 06 '13 at 16:59
Nope. when a `span` or `div` is given `role="button"`, browsers that know how to interpret ARIA, will now treat it like a button. Since headings are used to seperate content vs making text larger, it is inappropriate to use it as such. — Ryan B, Mar 06 '13 at 17:47
Thank for spotting this, I was not aware. I am testing your full proposal right now. — Bertrand, Mar 06 '13 at 17:49

score 4 · Accepted Answer · answered Mar 05 '13 at 19:34

Tabindex 0 and -1 have a different behavior than positive intergers. Snook's post about tabindex may help some. Multiple elements on a page can contain a tabindex="-1". I am not an expert in <buttons>, but typically they are for form submission versus navigation, so my first suggestion would be making the buttons into normal links.

<a href="#myID">Jump to Section name</a>
...
<div id="myID" tabindex="-1">
...
</div>

You may need to do another trick

<a href="#myID">Jump to Section name</a>
...
<div>
 <a name="myID" id="myID" tabindex="-1"></a>
...
</div>

AJAX and accessibility: focus or tab index on active element

My group

1 Answers1