javascript - 覆盖默认的 Tab 行为以专注于浏览器表单

标签 javascript jquery jquery-ui accessibility

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

我的问题是 jquery-ui 模态对话框。如果用户在对话框的最后一个控件(此应用程序的取消按钮)上按下选项卡,则焦点会移到对话框之外。或者在对话框中的第一个控件上按 shift-tab。

当用户执行此操作时,并不总是可以返回对话框。 IE8 和 FF8 在这方面的表现有些不同。我尝试使用以下事件处理程序捕获制表键 -

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

但这不起作用,因为浏览器似乎在 jquery 完成后处理按键。

两个问题-

  1. 对于可访问性合规性,我什至需要担心这个吗?尽管出于可用性原因,我认为我应该这样做。
  2. 有没有办法让它发挥作用?

最佳答案

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/

相关文章:

javascript - 从 Typescript 创建可读的 JS

javascript - 限制 Bootstrap 输入标签最多 100 个标签

javascript - JavaScript 中不同区域设置的货币总和

jQuery-ui 可调整大小 : Resizing doesn't work for dynamically created SVG element

json - 使用静态 json 文件作为源的 jQuery UI 自动完成

javascript - Sequelize hasMany 包含返回对象而不是数组

javascript - 在 javascript 函数中设置 ruby​​ 实例变量

javascript - Node Tutorial one to Many 没有加载远程服务器 Stream Spinner 移动无穷

jquery - 非常简单的图像 slider /幻灯片,带有左右按钮。没有自动播放

html - 带有 AngularJS 的 Jquery UI 对话框