web main  - 考虑到网络可访问性

键盘可访问性
tabindex.

概要

tabindex.属性有三种不同的用途:

  • tabindex =“1”(或任何大于1)的任何数字定义了一个显式选项卡或键盘导航顺序。必须始终避免这种情况。
  • tabindex =“0”除了链接和表单元素外,允许元素接收键盘焦点。它不会更改选项卡顺序,但将元素放在逻辑导航流程中,就像页面上的链接/按钮一样。
  • tabindex =“ - 1”除链接和表单元素外,允许以接收“编程”焦点的内容,缩点可以通过脚本将焦点设置为元素。

tabindex.属性

tabindex.1+的属性明确定义页面内的聚焦元素(通常链接和表单控件)的导航顺序。它也可用于定义元素是否应聚焦。

重要

tabindex.必须避免1+的值。这些元素将在元素之前接收键盘焦点,没有tabindex.价值(或tabindex =“0”)导致导​​航顺序与视觉和/或屏幕阅读器顺序不同。而不是使用tabindex.,只需调整页面的源代码顺序以支持逻辑导航和读取顺序,然后使用CSS来调整视觉演示。

0.-1价值

tabindex =“0”tabindex =“ - 1”具有特殊含义并提供HTML中的不同功能。

tabindex =“0”

值为0表示应将元素放在默认导航顺序中。这允许本地聚焦的元素(例如

,和没有HREF.)接收键盘焦点。链接和表单控件最适合几乎所有互动元素,但tabindex =“0”允许其他元素聚焦,因此可能能够触发相互作用。

重要

如果tabindex =“0”用于使元素聚焦,键盘交互必须正确而直观地为该元素。这意味着,例如,将呈现为按钮的元素必须响应两者输入空格键按键。在某些浏览器中,这可能需要使用脚本进行键口检测。aria角色(如角色=“按钮”)和属性(例如ARIA-EXPENGED =“真实”)等必须用于通知屏幕阅读器用户可导航元素的功能。

tabindex =“ - 1”

一种tabindex =“ - 1”value从默认导航流中删除交互式元素。在大多数情况下,这是不可取的。如果添加到尚未互动的东西,tabindex =“ - 1”允许该元素接收编程焦点。这意味着焦点可以使用它焦点()脚本。这对于不应直接使用的元素可能是有用的标签键,但需要让键盘焦点设置为它们。示例包括在打开时应聚焦的模态对话框窗口,或者在提交错误表单时应立即聚焦的表单提交错误消息。

值-1的值也可能在复杂的小部件和使用箭头键或其他快捷键的菜单中有用。它可以确保仅窗口小部件中的一个元素(例如选项卡面板的一组交互式选项卡中的活动选项卡)可导航标签键,同时仍允许焦点设置小部件中的其他组件。

重要

请记住tabindex =“ - 1”从默认导航流中删除元素。不要分配tabindex =“ - 1”对于任何必须为键盘导航的元素,例如观察用户可以单击鼠标的链接或按钮。