1

我目前正在开发一个必须可访问的 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 应用程序）中有 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 替换 click 功能，会这样做，但现在它工作得很好）。当用户点击按钮时，他被发送到持有按钮取消和确认的 div。这工作得很好！

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

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

});

PLACE II，只是不工作

html：我用链接和按钮尝试了不同的场景，没有更多的机会。当你点击一个链接或者一个按钮的时候，你应该tabindex到href中引用的div（这里是dom内容，anchors被修改了#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 才能获得焦点。

4

1 回答 1

4

Tabindex 0 和 -1 具有与正整数不同的行为。Snook 关于 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>
于 2013-03-05T19:34:38.977 回答