通过使用正确的语义 HTML 元素，你或许能够满足大部分或全部键盘访问需求。这意味着减少调整 tabindex 的时间，并让用户更满意！
免费的键盘支持（以及更佳的移动体验）
有许多内置的交互式元素具有适当的语义和键盘支持。开发者最常使用的元素有：
此外，带有 contenteditable 属性的元素有时用于自由格式文本输入。
这些元素提供的内置键盘支持很容易被忽视。以下是一些示例元素供你探索。请尝试使用键盘操作它们，而不是使用鼠标。你可以使用 TAB（或 SHIFT + TAB）在控件之间移动，并且可以使用箭头键和 ENTER 和 SPACE 等键来操作它们的值。
如果你手边有手机，你会发现许多时候这些内置元素在移动设备上具有独特的交互方式。尝试自行重现这些移动交互方式需要大量工作！这是尽可能坚持使用内置元素的另一个充分理由。
使用 button 而不是 div
常见的无障碍功能反模式是将非交互式元素（例如 div 或 span）视为按钮，方法是向其添加点击处理程序。
但是，要被视为可访问，按钮应具备以下条件：
- 可通过键盘聚焦
- 支持禁用
- 支持使用
ENTER键或SPACE键执行操作 - 可由屏幕阅读器正确播报
div 按钮不具备这些特性。这意味着你需要编写额外的代码来复制 button 元素免费提供的功能！
例如，button 元素有一个叫做 *合成点击激活* 的巧妙技巧。如果你向 button 添加“click”处理程序，则当用户按下 ENTER 键或 SPACE 键时，它将运行。 div 按钮不具备此功能，因此你需要编写额外的代码来监听 keydown 事件，检查键码是否为 ENTER 或 SPACE，然后运行你的点击处理程序。哎哟！这需要做很多额外的工作！
比较此示例中的差异。使用 TAB 键移至任一控件，并使用 ENTER 键和 SPACE 键尝试点击它们。
如果你的现有网站或应用中有 div 按钮，请考虑将它们替换为 button 元素。 button 易于样式化，并且在无障碍功能方面优势多多！
链接与按钮
另一个常见的反模式是将链接视为按钮，方法是向其附加 JavaScript 行为。
<a href="#" onclick="// perform some action">
按钮和链接都支持某种形式的合成点击激活。那么应该选择哪一个呢？
- 如果点击元素将在页面上执行操作，请使用
<button>。 - 如果点击元素将导航用户到新页面，则使用
<a>。这包括加载新内容并使用 History API 更新网址的单页 Web 应用。
这样做的原因是屏幕阅读器对按钮和链接的播报方式不同。使用正确的元素有助于屏幕阅读器用户了解预期结果。
待办事项：DevSite - 思考和检查评估
样式设置
某些内置元素，尤其是 <input>，可能难以设置样式。通过一些巧妙的 CSS，你或许能够解决其中一些限制。（名字很搞笑的）WTFForms 项目包含一个 示例样式表，其中演示了多种用于设置一些较难内置元素样式的技巧。
后续步骤
使用内置 HTML 元素可以大大提高网站的无障碍功能，并显著减少你的工作量。尝试在你的网站上使用 Tab 键进行浏览，并查找任何缺少键盘支持的控件。如果可能，请将它们替换为标准化的 HTML 替代方案。
有时你可能会发现某个元素在 HTML 中没有对应的元素。没关系！继续阅读以了解如何使用 tabindex 向自定义交互式控件添加键盘支持。