通过使用正确的语义 HTML 元素,您或许可以满足大多数或所有键盘访问需求。这意味着您可以减少花在 tabindex
上的时间,让用户感到更满意!
免费提供键盘支持(并提供更出色的移动体验)
有许多内置互动元素具有适当的语义和键盘支持。开发者最常用的模板有:
此外,具有 contenteditable
属性的元素有时用于输入自由格式文本。
这些元素提供的内置键盘支持很容易被忽视。以下是一些要探讨的元素示例。请尝试使用键盘(而不是鼠标)来操作它们。您可以使用 TAB
(或 SHIFT +
TAB
)在控件之间移动,也可以使用箭头键和 ENTER
和 SPACE
等键来操纵它们的值。
如果您手边有手机,就会发现,这些内置元素在移动设备上很多时候都会产生独特的互动。尝试自行再现这些移动互动是一项大量的工作!尽可能坚持使用内置元素的另一个好理由。
使用 button
,而不要使用 div
一种常见的无障碍功能反面模式是通过向非交互元素(如 div
或 span
)添加点击处理程序,将该元素视为按钮。
但是,按钮应符合以下要求,才符合无障碍标准:
- 可通过键盘聚焦
- 正在停用支持
- 支持
ENTER
或SPACE
键以执行操作 - 由屏幕阅读器正确读出
div
按钮不包含上述任何元素。这意味着,您需要编写额外的代码来免费复制 button
元素为您提供的内容!
例如,button
元素有一种叫做 *合成点击激活*的巧妙技巧。如果您向 button
添加“点击”处理程序,它会在用户按 ENTER
或 SPACE
时运行。div
按钮没有此功能,因此您需要编写额外的代码来监听 keydown
事件,检查键码是否为 ENTER
或 SPACE
,然后运行点击处理程序。哎呀!
你需要完成大量额外的工作!
请比较此示例中的不同之处。TAB
进行控制,并使用 ENTER
和 SPACE
尝试点击它们。
如果您的现有网站或应用中有 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
为自定义互动控件添加键盘支持。