通过使用正确的语义 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 为自定义交互式控件添加键盘支持。