AJAX和辅助功能：活动元素上的焦点或制表符索引

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.

Answer 1

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>