许多不同类型的用户都依赖于键盘来浏览应用，其中包括行动能力暂时或永久受损的用户，以及使用键盘快捷键提高效率的用户。为应用制定良好的键盘导航策略，可为所有用户打造更好的体验。
焦点和标签页顺序
在特定时刻，“焦点”是指当前应用中的哪个元素（例如字段、复选框、按钮或链接）当前从键盘接收输入。除了接收键盘事件之外，聚焦的元素还会获取从剪贴板粘贴的内容。
如需在页面上移动焦点，请使用 TAB 前进，使用 SHIFT + TAB 返回。当前聚焦的元素通常由聚焦环指示，不同浏览器的聚焦环样式各不相同。焦点在交互式元素中正向和反向跳转的顺序称为 Tab 键顺序。
文本字段、按钮和选择列表等交互式 HTML 元素可隐式聚焦：它们会根据它们在 DOM 中的位置自动插入到 Tab 键顺序中。这些互动元素也具有内置的键盘事件处理功能。段落和 div 等元素不是隐式可聚焦的，因为用户通常不需要与它们互动。
实现逻辑性标签页顺序是向用户提供顺畅键盘导航体验的重要部分。在评估和调整标签页顺序时，请注意以下两个要点：
- 将 DOM 中的元素按逻辑顺序排列
- 正确设置不应获得焦点的屏幕外内容的公开范围
将 DOM 中的元素按逻辑顺序排列
如需检查应用的 Tab 键顺序是否合乎逻辑，请尝试在页面上循环。一般来说，焦点应遵循阅读顺序，从左到右、从页面顶部到底部移动。
如果焦点顺序似乎不正确，您应重新排列 DOM 中的元素，以使标签页顺序更自然。如果您希望某些内容在屏幕上较早地显示，请将其移到 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 更改元素的视觉位置时要小心，以免创建不合理的标签页顺序。如需修正上述不合理的标签页顺序，请移动浮动“Kiwi”按钮，使其在 DOM 中位于“Coconut”按钮之后，然后移除内嵌样式。
正确设置屏幕外内容的可见性
有时，屏幕外互动元素需要位于 DOM 中，但不应位于标签页顺序中。例如，如果您有一个响应式侧边导航栏，该导航栏会在您点击按钮时打开，那么当该导航栏处于关闭状态时，用户应该无法对其聚焦。
如需阻止特定交互元素获得焦点，您应为该元素提供以下任一 CSS 属性：
display: nonevisibility: hidden
如需将该元素重新添加到标签页顺序中（例如在打开侧边栏时），请将上述 CSS 属性分别替换为：
display: blockvisibility: visible
后续步骤
对于几乎全靠键盘或其他输入设备来操作计算机的用户，合理的标签页顺序对于提高应用的可访问性和易用性至关重要。为了养成检查标签页顺序的好习惯，请尝试在每次发布前在应用中循环跳格。