Question

我目前正在开发一个必须可访问的AJAX应用程序（WGAG 2.0，AA）。

我正在使用屏幕阅读器测试我的应用程序（目前在Mac Os X上使用Voice Over）。

导航包含一系列按钮。当用户单击按钮时，javascript检查内容是否已添加到页面中，如果没有，则执行AJAX调用，向页面添加新div，隐藏以前的元素并显示新内容，哪个工作正常

我遇到的问题是我希望用户在按下按钮时直接转到内容，这样人就可以直接阅读内容而不是将光标留在按钮上（所以现在，当客户端按下时按钮，光标停留在按钮上，而不是读取已加载的内容。

我试过了：

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

和

$(id).focus();

其中id是包含id值的变量（使用右选择器'＃'）。

它不能很好地工作，我认为这是因为在第二次单击按钮时，两个元素的tabindex设置为-1，但我不确定。

我想知道是否有人知道我应该使用哪种方法？

更新**

同一页面中有两个地方（AJAX应用程序）我需要这个功能，第一部分是一个小部件，其中tabindex设置为-1可以正常工作：

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（从我昨天学到的东西，我应该用on替换点击功能，将会这样做，但现在这工作得很好）。当用户点击按钮时，他被发送到保持按钮取消和确认的div。这很好用！

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

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

});

PLACE II，只是不工作

html：我尝试了不同的方案，链接和按钮没有更多的机会。当您单击链接或按钮时，您应该tabindex到href中引用的div（这里是dom内容，修改了锚点#avantages - ＆gt;＃/ avantages已被修改）或者带有ID内容的div -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();     
    });
});

tabindex设置为-1，屏幕滚动到div，但是在这种情况下屏幕阅读器保持在链接级别，而在同一页面上的位置1，它工作得很好。我现在想知道是否有一些更具体的条件必须适用于div以获得焦点。

Answer 1

Tabindex 0和-1的行为与正面整数不同。 Snook's post about tabindex可以帮助一些人。页面上的多个元素可以包含tabindex="-1"。我不是<buttons>的专家，但通常是表单提交与导航，所以我的第一个建议就是将按钮设置为普通链接。

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

你可能需要做另一招

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

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

1 个答案: