javascript - AJAX 和辅助功能 : focus or tab index on active element

Question

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

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

导航由一系列按钮组成。当用户单击一个按钮时，javascript 检查内容是否已添加到页面，如果没有，它执行 AJAX 调用，将新的 div 添加到页面，隐藏以前的元素并显示新内容，效果很好.

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

我试过:

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

和

$(id).focus();

其中 id 是包含 id 值的变量(带有正确的选择器“#”)。

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

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

更新**

在同一页面(AJAX 应用程序)中有 2 个地方我需要该功能，第一部分是一个小部件，其中将 tabindex 设置为 -1 就可以正常工作:

我的地方

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内容， anchor 被修改#avantages -> #/avantages已被修改)或者ID内容为div -容器

<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>