默认 DOM 顺序的重要性
使用原生元素是了解焦点行为的好方法，因为它们会根据其在 DOM 中的位置自动插入到 Tab 键顺序中。
例如，您可能有三个按钮元素，它们在 DOM 中一个接一个地排列。按 Tab 会按顺序聚焦每个按钮。尝试点击下面的代码块以移动焦点导航起点，然后按 Tab 移动焦点。
<button>I Should</button>
<button>Be Focused</button>
<button>Last!</button>
不过，请务必注意，使用 CSS 时，内容在 DOM 中可能以一种顺序存在，但在屏幕上以不同的顺序显示。例如，如果您使用 float 等 CSS 属性将一个按钮向右移动，则这些按钮在屏幕上的显示顺序会有所不同。但由于它们在 DOM 中的顺序保持不变，因此其 Tab 键顺序也保持不变。当用户通过 Tab 键浏览页面时，按钮会以不直观的顺序获得焦点。尝试点击下面的代码块以移动焦点导航起点，然后按 Tab 键在按钮之间移动焦点。
<button style="float: right">I Should</button>
<button>Be Focused</button>
<button>Last!</button>
使用 CSS 更改屏幕上元素的视觉位置时，请务必小心。 这可能会导致 Tab 键顺序看似随机地跳转，从而让依赖键盘的用户感到困惑。因此，Web AIM 核对清单在第 1.3.2 节中指出，由代码顺序决定的阅读和导航顺序应合乎逻辑且直观。
一般来说，请尝试每隔一段时间通过按 Tab 键浏览您的网页，以确保您没有意外弄乱 Tab 键顺序。这是一个值得养成的好习惯，而且不需要花费太多精力。
屏幕外内容
如果您有当前未显示但仍需保留在 DOM 中的内容（例如响应式侧边导航栏），该怎么办？如果存在此类在屏幕外时会获得焦点的元素，那么当用户通过 Tab 键浏览页面时，焦点似乎会消失并重新出现，这显然不是理想的效果。理想情况下，我们应该防止面板在屏幕外时获得焦点，并且仅在用户可以与之互动时才允许其获得焦点。
有时，您需要做一些侦查工作，才能找出焦点去了哪里。您可以在控制台中使用 document.activeElement 找出当前获得焦点的元素。
知道哪个屏幕外元素获得焦点后，您可以将其设置为 display: none 或 visibility: hidden，然后在向用户显示之前将其设置回 display:
block 或 visibility: visible。
一般来说，我们建议开发者在每次发布前，通过 Tab 键浏览其网站，以确保 Tab 键顺序不会消失或跳出逻辑顺序。如果是，您应确保使用 display: none 或 visibility: hidden 适当地隐藏屏幕外内容，或者重新排列 DOM 中元素的物理位置，使其按逻辑顺序排列。