许多不同的用户都依赖键盘在应用中导航 向使用键盘的用户提供暂时性和永久性的运动障碍 可提高工作效率提供良好的键盘导航体验 策略可为所有用户带来更好的体验。
焦点和 Tab 键顺序
在特定时刻，“焦点”是指应用中的哪个元素（例如， 字段、复选框、按钮或链接）目前会从键盘接收输入。 除了接收键盘事件外，获得焦点的元素还会获取内容 粘贴文字
如需将焦点移至某个页面，请使用“TAB”向前导航和SHIFT + TAB
即可“向后导航”当前聚焦的元素通常由
焦点环，而不同的浏览器也采用不同的样式设置其焦点环。通过
焦点在互动元素中向前和向后移动的顺序
称为制表符顺序。
文本字段、按钮和选择列表等交互式 HTML 元素 隐式可聚焦：它们会自动插入到 Tab 键顺序中 广告客户和广告客户 DOM。 这些互动元素也具有内置的键盘事件处理功能。Elements 例如段落和 div 等元素并非隐式可聚焦，因为用户通常 不需要与之互动
实现符合逻辑的 Tab 键顺序是向用户提供 提供流畅的键盘导航体验我们建议你 在评估和调整标签页顺序时请注意以下事项：
- 按逻辑顺序排列 DOM 中的元素
- 正确设置不应接收的屏幕外内容的可见性 专注
按逻辑顺序排列 DOM 中的元素
要检查您应用的 Tab 键顺序是否合乎逻辑，请尝试在您的 页面。通常，焦点应遵循阅读顺序，即从左向右移动， 从页面顶部移至页面底部
如果焦点顺序有误，您应该重新排列 DOM 中的元素， 让 Tab 键顺序更加自然。如果您希望某些内容 请在 DOM 中靠前的位置移动。
尝试在以下两组按钮间移动，体验合乎逻辑的标签页 标签页顺序与非逻辑制表符顺序：
逻辑 Tab 键顺序
制表符顺序不符合逻辑
下面对这两个示例的代码进行比较：
逻辑 Tab 键顺序
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
制表符顺序不符合逻辑
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
使用 CSS 更改元素的视觉位置时要小心， 创建不符合逻辑的 Tab 键顺序。要修正上面不符合逻辑的 Tab 键顺序，请将 浮动“Kiwi”按钮，使其显示在“Coconut”按钮之后按钮，以及 移除内嵌样式
正确设置屏幕外内容的可见性
有时，屏幕外的交互式元素需要存在于 DOM 中，但不应位于 。例如，如果您有一个自适应侧边导航栏 点击按钮后，用户就不应该关注侧边导航栏 。
要阻止特定的互动元素获得焦点，您应该： 为元素指定以下任一 CSS 属性：
display: nonevisibility: hidden
将元素重新添加到 Tab 键顺序中，例如，当侧边导航栏 请将上述 CSS 属性分别替换为：
display: blockvisibility: visible
后续步骤
适用于几乎完全通过键盘或 逻辑制表符顺序是确保 使应用易于访问和使用在查看标签页顺序时 不妨尝试在每次发布前按 Tab 键查看应用。