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