许多不同的用户依赖键盘来导航应用程序——从有暂时性和永久性运动障碍的用户到使用键盘快捷键以提高效率和生产力的用户。为您的应用程序制定良好的键盘导航策略可以为所有人创造更好的体验。
焦点和 Tab 键顺序
在给定的时刻，焦点是指应用程序中当前接收键盘输入的元素（例如字段、复选框、按钮或链接）。除了接收键盘事件之外，获得焦点的元素还会获得从剪贴板粘贴的内容。
要在页面上移动焦点，请使用 TAB 键“向前”导航，使用 SHIFT + TAB 键“向后”导航。当前获得焦点的元素通常由焦点环指示，并且各种浏览器对焦点环的样式设置有所不同。焦点在交互式元素之间向前和向后移动的顺序称为 Tab 键顺序。
文本字段、按钮和选择列表等交互式 HTML 元素是隐式可聚焦的：它们会根据其在 DOM 中的位置自动插入到 Tab 键顺序中。这些交互式元素还具有内置的键盘事件处理功能。段落和 div 等元素不是隐式可聚焦的，因为用户通常不需要与它们交互。
实施逻辑 Tab 键顺序是为用户提供流畅键盘导航体验的重要组成部分。评估和调整 Tab 键顺序时，请记住以下两个主要思想：
- 在 DOM 中按逻辑顺序排列元素
- 正确设置不应接收焦点的屏幕外内容的可见性
在 DOM 中按逻辑顺序排列元素
要检查应用程序的 Tab 键顺序是否合乎逻辑，请尝试在页面上按 Tab 键进行导航。通常，焦点应遵循阅读顺序，从左到右，从页面顶部到底部移动。
如果焦点顺序似乎不正确，则应重新排列 DOM 中的元素，以使 Tab 键顺序更自然。如果您希望某些内容在屏幕上视觉上更早出现，请将其在 DOM 中移动得更早。
尝试在下面的两组按钮中按 Tab 键进行导航，以体验逻辑 Tab 键顺序与非逻辑 Tab 键顺序的区别
逻辑 Tab 键顺序
非逻辑 Tab 键顺序
下面比较了这两个示例的代码
逻辑 Tab 键顺序
<button>Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
非逻辑 Tab 键顺序
<button style="float: right">Kiwi</button>
<button>Peach</button>
<button>Coconut</button>
使用 CSS 更改元素的视觉位置时，请注意避免创建非逻辑 Tab 键顺序。要修复上面非逻辑的 Tab 键顺序，请移动浮动的“奇异果”按钮，使其在 DOM 中位于“椰子”按钮之后，并删除内联样式。
正确设置屏幕外内容的可见性
有时，屏幕外的交互式元素需要位于 DOM 中，但不应位于 Tab 键顺序中。例如，如果您有一个响应式侧边导航栏，它在您单击按钮时打开，则用户在侧边导航栏关闭时不应能够聚焦它。
要防止特定的交互式元素接收焦点，您应该为该元素提供以下任一 CSS 属性：
display: nonevisibility: hidden
要将元素重新添加到 Tab 键顺序中，例如，当侧边导航栏打开时，请将上述 CSS 属性分别替换为：
display: blockvisibility: visible
后续步骤
对于几乎完全使用键盘或其他输入设备操作计算机的用户而言，逻辑 Tab 键顺序对于使您的应用程序具有无障碍功能和可用性至关重要。作为检查 Tab 键顺序的良好习惯，请尝试在每次发布之前在您的应用程序中按 Tab 键进行导航。