可访问性:为什么 Jquery 菜单明确将菜单项 tabindex 设置为 -1



我想知道是否有人可以从可访问性的角度向我解释明确为菜单项锚点提供 -1 选项卡索引背后的逻辑。我想为我的菜单项提供一个选项卡索引 0,因为它们的自然顺序是我想要的顺序。这种策略有什么缺点吗?

tabindex="-1"将其

按顺序删除,允许键盘焦点通过脚本移动到那里。

jQuery菜单是具有指定键盘交互的WAI-ARIA菜单小部件的示例。

简而言之,菜单应该是制表

符顺序中的一个制表位,然后使用箭头键导航菜单。这就是为什么-1是一个有用的值,您可以使用箭头键编写键盘焦点移动的脚本。使用 0 会破坏交互模型,因此如果您想以这种方式更改它,我不会使用 jQuery 菜单。

我在可用性测试中发现,很少有人知道这种交互(即他们被卡住了(,至少对于"标准"网站来说,这些网站大多是一个 WAI-ARIA 小部件的内容。对于像gmail这样的东西来说,情况就不同了,人们(可能(期望获得更像应用程序的体验。

如果您正在寻找网站导航意义上的菜单,我会推荐Adobe OS大型菜单,它使用标准脚本和一些ARIA属性的组合,为常规网站提供出色的体验。

jQueryUI 团队最近在可访问性方面投入了大量精力,选项卡小部件是键盘可导航的:

键盘

  • 当焦点位于选项卡上时:
    • 向上/向左 - 将焦点移动到上一个选项卡。如果在第一个选项卡上,则将焦点移动到最后一个选项卡。在短暂延迟后激活焦点选项卡。
    • 向下/向右 - 将焦点移动到下一个选项卡。如果在最后一个选项卡上,则将焦点移动到第一个选项卡。在短暂延迟后激活焦点选项卡。
    • 主页 - 将焦点移动到第一个选项卡。 在短暂延迟后激活焦点选项卡。
    • 结束 - 将焦点移动到最后一个选项卡。在短暂延迟后激活焦点选项卡。
    • 空格 - 激活与焦点选项卡关联的面板。
    • ENTER - 激活或切换与焦点选项卡关联的面板。
    • ALT+向上翻页 - 将焦点移动到上一个选项卡并立即激活。
    • ALT + 向下翻页 - 将焦点移动到下一个选项卡并立即激活。
  • 当焦点位于面板中时:
    • CTRL+UP - 将焦点移动到关联的选项卡。
    • ALT+向上翻页 - 将焦点移动到上一个选项卡并立即激活。
    • ALT + 向下翻页 - 将焦点移动到下一个选项卡并立即激活。

老实说,我建议不要搞砸他们想出的东西。

正如其他回答者指出的那样,这是从制表符顺序中删除子菜单项,同时仍然通过其他方式提供对它的键盘访问。

以下是可访问菜单的详细说明,涉及 WAI-ARIA 属性和选项卡索引: 导航栏/菜单的推荐 WAI-ARIA 实现

这可以防止元素成为顺序导航焦点的一部分。最好假设它不是一个值得选项卡的项目,然后设置一个索引,如果操作不正确,这将是不可取的。

即使对于显示计算总和的只读字段的方案也是如此。如果您有用户按 Tab 键转到每个条目,则他们不必按 Tab 键两次即可绕过只读字段

选项卡索引 -1 用于从 Tab 键顺序中完全排除元素。

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

有关示例,请参阅此小提琴

使用它很好。请参阅 W3C HTML5 规范:

如果值为负整数

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

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

  • 您根本不希望使用键盘访问菜单

  • 你不知道你的代码将在哪个环境中使用(jQuery菜单可能最终出现在字段已经覆盖某些tabindex值的表单下方,所以他们不能只是将tabindex设置为任何内容(

至于你关于使用"0"作为标签索引的问题:

在HTML规范中,它说:

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

这意味着您可以使用 0 以外的任何值,只要要为其提供自然 Tab 键顺序的所有元素都具有相同的 tabindex。

最新更新