我正在构建我的第一个应用程序,出于可访问性原因,我必须遵守键盘导航。
我的问题是 jquery-ui 模态对话框。如果用户在对话框的最后一个控件(此应用程序的取消按钮)上按下选项卡,则焦点会移到对话框之外。或者在对话框中的第一个控件上按 shift-tab。
当用户执行此操作时,并不总是可以返回对话框。 IE8 和 FF8 在这方面的表现有些不同。我尝试使用以下事件处理程序捕获制表键 -
lastButton.keydown(function (e) {
if (e.which === TAB_KEY_CODE) {
e.stopPropagation();
$(this).focus();
}
});
但这不起作用,因为浏览器似乎在 jquery 完成后处理按键。
两个问题-
- 对于可访问性合规性,我什至需要担心这个吗?尽管出于可用性原因,我认为我应该这样做。
- 有没有办法让它发挥作用?
最佳答案
My problem has to do jquery-ui modal dialog boxes. If the user presses tab on the last control of the dialog (cancel button for this app), focus goes outside of the dialog box. Or presses shift-tab on the first control in the dialog box.
...然后制表符出现在模态框下方,在灰色半透明层下,滚动条在几次按键后从底部跳到顶部?是的,这对于使用键盘浏览并且不按 Tab 一百次就不知道如何返回模态框的视力正常的用户来说是个问题。盲人甚至不知道模式框仍然显示(他们仍然可以通过屏幕阅读器看到/听到整个 DOM!)并且页面/脚本正在等待提交或取消决定,所以这也是他们关心的问题.
一个正确的例子显示在http://hanshillen.github.com/jqtest/#goto_dialog (单击对话框选项卡,与 anchor 的直接链接不起作用:/)。它会永远停留在模态框内,直到您单击“关闭”或“确定”,然后将您带回到触发模态框的聚焦元素(我认为它应该在离开模态框后聚焦下一个可聚焦元素但没关系,这是'这里最大的可访问性问题)。
这一系列脚本基于 jQueryUI,并针对键盘和 ARIA 支持以及原始脚本中可能存在的任何可访问性问题进行了高度改进。强烈推荐! (我尝试混合使用 jQuery UI 原始脚本和这些脚本,但没有成功,尽管您不需要这样做:这些脚本本身可以正常工作)
关于javascript - 覆盖默认的 Tab 行为以专注于浏览器表单,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/8066823/