<button>
或 <input>
等标准 HTML 元素支持键盘无障碍功能
,应尽可能使用。不过,如果您需要构建
自定义互动元素,那么您可以通过以下方式创建预期的用户行为:
添加 tabindex
。
浏览器支持
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
- <ph type="x-smartling-placeholder">
请仅向互动式内容添加 tabindex
。即使内容
重要图片等,屏幕阅读器用户无需
添加焦点。
什么是 tabindex?
当您需要修改内置标签页提供的默认标签页顺序时
元素,则可以使用 tabindex
HTML 属性来明确设置
元素制表符的位置。
tabindex
可应用于任何元素,但应仅应用于
互动元素,并且采用一系列整数值。包含
tabindex
,您可以为可聚焦页面元素指定明确的顺序,
在 Tab 键顺序中插入原本无法聚焦的元素,并移除相应元素
从 Tab 顺序开始。例如:
tabindex="0"
:在自然 Tab 键顺序中插入元素。该元素可以
可通过按 Tab 键聚焦于元素,而可通过调用
其 focus()
方法。
tabindex="-1"
:从自然 Tab 键顺序中移除某个元素,但该元素
仍可通过调用 focus()
方法来获得焦点
tabindex="5"
:任何大于 0
的 tabindex 均将该元素置于前面
自然 Tab 键顺序。如果多个元素的 tabindex 大于
大于 0
,则制表符顺序从大于零的最小值开始
并向上运行。使用大于 0
的 tabindex 被视为
反模式。
确保可通过键盘使用控件
Lighthouse 等工具擅长自动检测某些无障碍功能 然而,某些测试仍须由人工完成。
请尝试按 Tab
键浏览您的网站。您能否通过
网页上的所有互动控件?如果不是,您可能需要使用
tabindex
以提高这些控件的可聚焦性。
在页面级别管理焦点
有时,tabindex
有助于打造顺畅的用户体验。例如:
如果您要构建一个包含不同内容部分的强大单一网页,而
内容会在网页加载的不同时间点隐藏。这可能意味着
导航链接会更改可见内容,而无需刷新网页。
在这种情况下,请确定所选内容区域,并为其指定 tabindex
-1
并调用其 focus
方法。这样可确保相应内容不会出现在
自然 Tab 键顺序。这种技术称为“管理焦点”,可保留
使用户感知的情境与网站的视觉内容保持同步。
管理组件中的焦点
在某些情况下,您还必须在控件级别管理焦点,例如使用 自定义元素。
知道要实现哪些键盘行为可能很困难。通过 无障碍富互联网应用 (ARIA) 创作 做法 该指南列出了组件类型及其支持的键盘操作类型。
在制表符顺序中插入元素
使用 tabindex="0"
将元素插入到自然 Tab 键顺序中。例如:
<div tabindex="0">Focus me with the TAB key</div>
如需聚焦某个元素,请按 Tab
键或调用元素的 focus()
方法。
从标签页顺序中移除元素
使用 tabindex="-1"
移除元素。例如:
<button tabindex="-1">Can't reach me with the TAB key!</button>
这会从自然 Tab 键顺序中移除某个元素,但该元素
通过调用其 focus()
方法来聚焦。
对元素应用 tabindex="-1"
不会影响其子元素;
如果它们自然处于 Tab 键顺序,或由于 tabindex
值而出现,
它们将保留在标签页顺序中
要从 Tab 键顺序中移除某个元素及其所有子元素,不妨考虑使用
WICG 的 inert
polyfill。
该 polyfill 模拟建议的 inert
属性的行为,
这会阻止辅助技术选择或读取元素。
避免使用 tabindex > 0
任何大于 0 的 tabindex
都会将元素跳至自然标签页的前面
订单。如果有多个元素的 tabindex
大于 0,则制表符
顺序是从大于零的最低值开始,并逐渐增加。
使用大于 0 的 tabindex
会被视为反模式,这是因为
屏幕阅读器按 DOM 顺序(而不是 Tab 键顺序)浏览页面。如果您需要
元素放在标签页顺序中较靠前的位置,则应将它移到更早的位置
在 DOM 中。
借助 Lighthouse,您可以使用 tabindex
>0.运行
无障碍功能审核(Lighthouse > 选项 > 无障碍功能),然后查找
返回“没有元素的 [tabindex]
值大于 0”的结果审核。
使用“tabindex
漫游”
如果您要构建复杂的组件,可能需要额外添加键盘
提供超出专注范围的支持请尽可能使用内置的 select
元素。时间是
可聚焦,并且允许按箭头键来显示其他可选择对象
选项。
如需在您自己的组件中实现类似的功能,您可以使用已知的方法,
如“漫游tabindex
”。循环 tabindex 通过将 tabindex
设置为 -1 来运行
所有子节点(当前活跃的子节点除外)。然后,该组件会使用键盘
事件监听器以确定用户按下了哪个键。
发生这种情况时,该组件会设置之前聚焦的子项的 tabindex
设置为 -1,将待聚焦子项的 tabindex
设置为 0,并调用 focus()
方法。
之前
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="0">Redo</button>
<button tabindex="-1">Cut</button>
</div>
之后
<div role="toolbar">
<button tabindex="-1">Undo</button>
<button tabindex="-1">Redo</button>
<button tabindex="0">Cut</button>
</div>
通过键盘访问食谱
如果您不确定自定义组件可能提供何种级别的键盘支持 您可以参阅 ARIA 创作做法 1.1。 本指南列出了常见的界面模式,并列出了 组件应该支持哪些功能