通过使用正确的语义 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="#" >
按钮和链接都支持某种形式的合成点击激活。那么，您应该选择哪个？
- 如果点击元素将在网页上执行某项操作，请使用
<button>。 - 如果点击该元素会将用户转到新页面，请使用
<a>。这包括使用 History API 加载新内容并更新网址的单页面 Web 应用。
这是因为屏幕阅读器会以不同的方式读出按钮和链接。使用正确的元素有助于屏幕阅读器用户了解预期的结果。
TODO：DevSite - 思考和检查评估
样式
某些内置元素（尤其是 <input>）可能很难设置样式。通过一些巧妙的 CSS 代码，您或许可以规避其中的一些限制。这个名为 WTFForms 的项目（名字很有趣）包含一个示例样式表，演示了用于为一些较难处理的内置元素设置样式的多种方法。
后续步骤
使用内置 HTML 元素可以显著提高网站的无障碍功能，并大幅减少工作量。尝试在您的网站中循环跳格，看看是否有任何控件不支持键盘。如果可能，请将其替换为标准化的 HTML 替代方案。
有时，您可能会发现某个元素在 HTML 中没有对应项。
没关系！请继续阅读，了解如何使用 tabindex 为自定义交互式控件添加键盘支持。