阻止选项卡在地址栏中循环

Question

我意识到这可能是一个可访问性问题,最好不要单独留下,但我想弄清楚是否有可能阻止选项卡访问Tab键周期中的地址栏.

我的应用程序有另一种循环输入区域的方法,但许多新用户本能地尝试使用该选项卡,并且它不能按预期工作.

Answer 1

这是一个通用的jquery实现,您无需查找max tab索引.请注意,如果在DOM中添加或删除元素,此代码也将起作用.

$('body').on('keydown', function (e) {
    var jqTarget = $(e.target);
    if (e.keyCode == 9) {

        var jqVisibleInputs = $(':input:visible');
        var jqFirst = jqVisibleInputs.first();
        var jqLast = jqVisibleInputs.last();

        if (!e.shiftKey && jqTarget.is(jqLast)) {
            e.preventDefault();
            jqFirst.focus();
        } else if (e.shiftKey && jqTarget.is(jqFirst)) {
            e.preventDefault();
            jqLast.focus();
        }
    }
});

但是,您应该注意上面的代码仅适用于可见输入.有些元素可能会成为文档的activeElement,即使它们没有输入,所以如果是你的情况,你应该考虑将它们添加到$(':input:visible')选择器中.

我没有添加代码来滚动到焦点元素,因为这可能不是每个人想要的行为......如果你需要它,只需在调用之后添加它 focus()

Answer 2

tabindex您可以使用 global属性控制 Tab 键顺序（以及哪些元素应该能够获得焦点）。

但是，您无法阻止用户使用此属性切换到不受页面控制的另一个上下文（例如浏览器的地址栏）。（不过，与 JavaScript 结合起来也许是可能的。）

对于这样的（邪恶的！）用例，您必须研究键盘陷阱。

WCAG 2.0 有指导原则：2.1.2 无键盘陷阱。在了解 SC 2.1.2中，您可以找到本指南的“技术和失败”：

• F10：由于以将用户困在一种格式类型中的方式组合多种内容格式，导致成功标准 2.1.2 和一致性要求 5 失败
• FLASH17：提供对 Flash 对象的键盘访问并避免键盘陷阱
• G21：确保用户不被内容困住

所以也许你会了解到这样一个陷阱是如何实现的。