Question

我想知道是否有人可以向我解释，从可访问性的角度来看，明确给出菜单项锚点的标签索引为-1的逻辑。我想给我的菜单项选项卡索引为0，因为它们的自然顺序是我想要的顺序。这个策略有什么缺点吗？

Answer 1

tabindex="-1"将其排除在订单之外，但允许通过脚本将键盘焦点移动到那里。

jQuery菜单是具有WAI-ARIA menu widget的specified keyboard interaction的示例。

简而言之，菜单应该是Tab键顺序中的一个制表位，然后使用箭头键导航菜单。这就是为什么-1是一个有用的值，您可以使用箭头键编写键盘焦点的移动脚本。使用0会破坏交互模型，所以如果你想以这种方式改变它，我就不会使用jQuery菜单。

我在可用性测试中发现很少有人知道这种交互（即它们被卡住），至少对于那些主要使用一个WAI-ARIA小部件的“标准”网站而言。对于像gmail这样的东西是不同的，人们（可能）期望更像应用程序的体验。

如果您正在寻找网站导航意义上的菜单，我建议Adobe OS mega-menu使用标准脚本和一些ARIA属性的组合，为常规网站提供良好的体验。< / p>

Answer 2

jQueryUI团队最近为可访问性付出了很多努力the tabs widget is keyboard navigable：

<强>键盘

焦点位于标签上时：
- 向上/向左 - 将焦点移至上一个标签。如果在第一个选项卡上，将焦点移至最后一个选项短暂延迟后激活焦点标签。
- 向下/向右 - 将焦点移至下一个标签。如果在最后一个选项卡上，将焦点移至第一个选项短暂延迟后激活焦点标签。
- HOME - 将焦点移至第一个标签。短暂延迟后激活焦点标签。
- END - 将焦点移至最后一个标签。短暂延迟后激活焦点标签。
- SPACE - 激活与焦点标签关联的面板。
- ENTER - 激活或切换与焦点选项卡关联的面板。
- ALT + PAGE UP - 将焦点移至上一个标签并立即激活。
- ALT + PAGE DOWN - 将焦点移至下一个标签并立即激活。
当焦点在面板中时：
- CTRL + UP - 将焦点移至关联标签。
- ALT + PAGE UP - 将焦点移至上一个标签并立即激活。
- ALT + PAGE DOWN - 将焦点移至下一个标签并立即激活。

老实说，我建议不要捣乱他们想出的东西。

Answer 3

正如其他回答者所指出的，它是从标签顺序中删除子菜单项，同时仍然通过其他方式提供键盘访问。

以下是可访问菜单的详细说明，涉及WAI-ARIA属性和tabindex：Recommended WAI-ARIA implementation for navigation bar/menu

Answer 4

tabindex为-1用于完全从Tab键顺序中排除元素。

示例

<input type="text" tabindex="1" /> <input type="text" tabindex="2" /> <input type="text" tabindex="-1" /> <input type="text" tabindex="3" />

See this fiddle for an example

使用它很好。请参阅W3C HTML5 specification：


如果值为负整数

用户代理必须设置元素的tabindex焦点标记，但不应允许使用顺序焦点导航来访问元素。

我说（从可访问性的角度来看）这种方法在以下情况下最有意义：

您根本不想使用键盘访问菜单

或

您不知道您的代码将在哪个环境中使用（jQuery菜单最终可能会在其字段已覆盖某些tabindex值的表单下方，因此他们无法将tabindex设置为任何内容）

关于＆＃34; 0＆＃34;的使用问题作为tabindex：

在HTML specification中说：


具有相同tabindex值的元素应按照它们在字符流中出现的顺序进行导航。

意味着您可以使用0以外的任何值，只要您想要给出自然Tab键顺序的所有元素，都具有相同的tabindex。

Answer 5

这可以防止元素成为顺序导航焦点的一部分。最好假设它不是一个有价值的项目，然后设置一个在不正确的情况下不合需要的索引。

即使是显示计算总和的只读字段的场景。如果您有一个用户标签到每个条目，他们不应该选项卡两次以绕过只读字段

辅助功能：为什么Jquery菜单显式将菜单项tabindex设置为-1？

5 个答案: