通过使用正确的语义 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 元素可以显著提高网站的无障碍功能，并大幅减少工作量。尝试在您的网站中循环跳格，看看是否有任何控件不支持键盘。如果可能，请将其替换为标准化的 HTML 替代方案。
有时，您可能会发现某个元素在 HTML 中没有对应项。没关系！请继续阅读，了解如何使用 tabindex 为自定义交互式控件添加键盘支持。