键盘
为了完全可访问,网页必须能够由仅使用键盘访问和控制它的人操作。这包括屏幕阅读器用户,但也可能包括难以操作指向设备(如鼠标或轨迹球)的用户、鼠标当前无法使用或无论何时可能都更喜欢使用键盘输入的用户。
可聚焦元素应具有交互语义
如果可以使用键盘聚焦某个元素,则该元素应具有交互性;也就是说,用户应该能够对其执行某些操作并产生某种变化(例如,激活链接或更改选项)。
注意:此规则的一个重要例外是,如果元素应用了role="document"
属性,位于交互式上下文(如role="application"
)内。在这种情况下,聚焦嵌套文档是将辅助技术返回到非交互式状态(通常称为“浏览模式”)的唯一方法。
大多数交互式元素默认情况下都可聚焦;您可以通过向其添加tabindex=0
属性值来使元素可聚焦。但是,只有在您也使元素具有交互性(例如,通过为键盘事件定义适当的事件处理程序)后,才应添加tabindex
。
另请参阅
- tabindex 全局 HTML 属性
- 元素:keydown 事件
- 元素:keyup 事件
避免使用大于零的tabindex
属性
tabindex
属性指示元素可以使用键盘聚焦。值为零表示该元素是默认焦点顺序的一部分,该顺序基于 HTML 文档中元素的排序。正值将元素置于默认排序之前;具有正值的元素将按其tabindex
值的顺序聚焦(1、然后 2、然后 3 等)。
当焦点顺序与页面的逻辑顺序不同时,这会给仅使用键盘的用户造成混淆。更好的策略是构建 HTML 文档,以便可聚焦元素按逻辑顺序排列,而无需使用正tabindex
值重新排序它们。
另请参阅
- tabindex 全局 HTML 属性
- 了解焦点顺序
- 不要使用大于 0 的 tabindex
可点击元素必须可聚焦,并且应具有交互语义
如果可以使用指向设备(如鼠标)单击某个元素,则它也应可以使用键盘聚焦,并且用户应该能够通过与其交互来执行某些操作。
如果为元素定义了onclick
事件处理程序,则该元素是可点击的。您可以通过向其添加tabindex=0
属性值来使其可聚焦。您可以通过定义onkeydown
事件处理程序使其可使用键盘操作;在大多数情况下,事件处理程序采取的操作对于这两种类型的事件都应该相同。
另请参阅
- tabindex 全局 HTML 属性
- 元素:keydown 事件
- 元素:keyup 事件
交互式元素必须能够使用键盘激活
如果用户可以使用触摸或指向设备与元素交互,则该元素还应支持使用键盘进行交互。也就是说,如果您为触摸或点击事件定义了事件处理程序,则还应为键盘事件定义事件处理程序。键盘事件处理程序应有效地启用与触摸或点击处理程序相同的交互。
另请参阅
- 元素:keydown 事件
- 元素:keyup 事件
交互式元素必须可聚焦
如果用户可以与元素交互(例如,使用触摸或指向设备),则它应可以使用键盘聚焦。您可以通过向其添加tabindex=0
属性值来使其可聚焦。这会将元素添加到可以通过按Tab键聚焦的元素列表中,其顺序是在 HTML 文档中定义的此类元素的顺序。
另请参阅
- tabindex 全局 HTML 属性
可聚焦元素必须具有焦点样式
任何可以接收键盘焦点的元素都应具有指示元素何时处于焦点的可见样式。您可以使用:focus
和:focus-visible
CSS 伪类来实现。
浏览器默认情况下会为链接和输入字段等标准可聚焦元素提供特殊样式,因此您可能不需要为这些元素指定焦点样式,除非您希望焦点样式更具特色。
如果您创建了自己的可聚焦组件,请确保也为其定义焦点样式。