使用语义 HTML 轻松在键盘上取胜

通过使用正确的语义 HTML 元素,您或许可以满足大多数或所有键盘访问需求。这意味着您可以减少花在 tabindex 上的时间,让用户感到更满意!

免费提供键盘支持(并提供更出色的移动体验)

有许多内置互动元素具有适当的语义和键盘支持。开发者最常用的模板有:

此外,具有 contenteditable 属性的元素有时用于输入自由格式文本。

这些元素提供的内置键盘支持很容易被忽视。以下是一些要探讨的元素示例。请尝试使用键盘(而不是鼠标)来操作它们。您可以使用 TAB(或 SHIFT + TAB)在控件之间移动,也可以使用箭头键和 ENTERSPACE 等键来操纵它们的值。

如果您手边有手机,就会发现,这些内置元素在移动设备上很多时候都会产生独特的互动。尝试自行再现这些移动互动是一项大量的工作!尽可能坚持使用内置元素的另一个好理由。

使用 button,而不要使用 div

一种常见的无障碍功能反面模式是通过向非交互元素(如 divspan)添加点击处理程序,将该元素视为按钮。

但是,按钮应符合以下要求,才符合无障碍标准:

  • 可通过键盘聚焦
  • 正在停用支持
  • 支持 ENTERSPACE 键以执行操作
  • 由屏幕阅读器正确读出

div 按钮不包含上述任何元素。这意味着,您需要编写额外的代码来免费复制 button 元素为您提供的内容!

例如,button元素有一种叫做 *合成点击激活*的巧妙技巧。如果您向 button 添加“点击”处理程序,它会在用户按 ENTERSPACE 时运行。div 按钮没有此功能,因此您需要编写额外的代码来监听 keydown 事件,检查键码是否为 ENTERSPACE,然后运行点击处理程序。哎呀! 你需要完成大量额外的工作!

请比较此示例中的不同之处。TAB 进行控制,并使用 ENTERSPACE 尝试点击它们。

如果您的现有网站或应用中有 div 按钮,不妨考虑将这些按钮替换为 button 元素。button 可以轻松设置样式,而且具有多项无障碍功能优势!

另一种常见的反模式是通过向链接附加 JavaScript 行为,将链接视为按钮。

<a href="#" onclick="// perform some action">

按钮和链接都支持某种形式的合成点击激活。那么,您应该选择哪一种呢?

  • 如果点击元素会在页面上执行某项操作,请使用 <button>
  • 如果点击该元素会将用户导航到新页面,请使用 <a>。这包括使用 History API 加载新内容并更新网址的单页 Web 应用。

这是因为屏幕阅读器读出按钮和链接的方式有所不同。使用正确的元素有助于屏幕阅读器用户了解预期结果。

TODO:DevSite - 思考并检查评估

样式

某些内置元素(特别是 <input>)可能很难设置样式。凭借一些巧妙的 CSS,您或许能够解决其中一些限制。WTFForms 项目(名称很搞笑)包含一个示例样式表,其中演示了许多用于设置一些较难的内置元素样式的技巧。

后续步骤

使用内置 HTML 元素可大幅提高网站的可访问性,并显著减少您的工作量。请尝试按 Tab 键浏览您的网站,并查找所有不支持键盘的控件。如果可能,请换用标准的 HTML 替代方案。

有时,您可能会发现某个元素在 HTML 中没有对应的元素。没关系!请继续阅读下文,了解如何使用 tabindex 为自定义互动控件添加键盘支持。