使用语义 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 元素可以显著提高网站的无障碍功能,并大幅减少工作量。尝试在您的网站中循环跳格,看看是否有任何控件不支持键盘。如果可能,请将其替换为标准化的 HTML 替代方案。

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