Question

我正在构建我的第一个应用程序，出于可访问性原因，我必须遵守键盘导航。

我的问题必须是jquery-ui模式对话框。如果用户按下对话框的最后一个控件上的选项卡（此应用程序的取消按钮），焦点将超出对话框。或者按对话框中第一个控件上的shift-tab。

当用户执行此操作时，无法始终返回到对话框。 IE8和FF8在这方面的表现略有不同。我试图用以下事件处理程序捕获tab键 -

lastButton.keydown(function (e) {
    if (e.which === TAB_KEY_CODE) {
        e.stopPropagation();
        $(this).focus();
    }
});

但这不起作用，因为看起来浏览器在jquery完成后处理按键。

两个问题 -

对于辅助功能合规性，我是否还要担心这个问题？虽然，出于可用性原因，我认为我应该这样做。
有没有办法让这项工作？

Answer 1

我的问题必须是jquery-ui模式对话框。如果用户按下对话框的最后一个控件上的选项卡（此应用程序的取消按钮），焦点将超出对话框。或者按对话框中第一个控件上的shift-tab。

...然后Tabed发生在模态框下方，在一个灰色的半透明层下面，滚动条在几个按键之后从下往上跳跃？是的，这对于使用键盘进行浏览并且不知道如何在不按Tab键一百次的情况下返回模态框的视力用户来说是一个问题。盲人甚至不知道模态框仍然显示（他们仍然可以通过他们的屏幕阅读器看到/听到整个DOM！）并且页面/脚本正在等待提交或取消决定，因此它也是他们关注的问题

完成权限的示例显示在http://hanshillen.github.com/jqtest/#goto_dialog（单击“对话框”选项卡，带有锚点的直接链接不起作用：/）。它会永远标记在模态框内，直到你点击关闭或确定，然后会让你回到触发模态框的聚焦元素上（我认为它应该在离开模态框后关注下一个可聚焦元素但是没关系，这不是这里最大的可访问性问题这一系列脚本基于jQueryUI，并且在键盘和ARIA支持以及原始脚本中可能存在的任何可访问性问题方面得到了很大改进。强烈推荐！（我尝试混合使用jQuery UI原始脚本和这些脚本，但是没有设法使任何工作，但你不需要这样做：这些脚本自己工作正常）

Answer 2

也许您应该使用preventDefault()阻止默认操作，而不是停止传播并使用按键而不是keydown。
这样就不需要重新获得关注。

停止传播不起作用，因为它只是阻止事件冒泡。您可以考虑使用stopImmediatePropagation（）但我认为更改选项卡压力的输入不能以这种方式停止并且preventDefault（）更正确。

lastButton.keypress(function (e) {
    if (e.which === TAB_KEY_CODE) {
        e.preventDefault();
    }
});

在这里摆弄：http://jsfiddle.net/jfRzM/

Answer 3

我参加聚会有点晚了，但我发现我也必须在其他键盘事件中调用 preventDefault。

ex) 我在 keyup 事件中设置焦点。但是浏览器仍然在用 keydown 或 keypress 做它的事情。所以我有这样的东西（我使用了 JQuery/Typescript，但这个想法应该可以转化为任何东西）：

elem.keyup(this.onDialogKeyPress);
elem.keydown(this.onDialogPressPreventDefault);
elem.keypress(this.onDialogPressPreventDefault);

...

private onDialogPressPreventDefault = (e: KeyboardEvent) => {
    const keys = [9, 27];

    if (keys.includes(e.which)) {
        e.preventDefault();
        return false;
    }
}

private onDialogKeyPress = (e: KeyboardEvent) => {
    // Tab
    if (e.which == 9) {
        e.preventDefault();
        // Do tab stuff
        return false;
    }
    // Esc
    else if (e.which == 27) {
        e.preventDefault();
        // Do Esc stuff
        return false;
    }
}

覆盖默认的Tab行为以保持对浏览器表单的关注

3 个答案: