默认 DOM 顺序的重要性
使用原生元素是了解焦点行为的好方法，因为它们会根据在 DOM 中的位置自动插入到标签页顺序中。
例如，您可能在 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 中（例如响应式侧边栏），该怎么办？如果您有此类元素在屏幕外时会获得焦点，那么当用户通过标签页浏览网页时，焦点似乎会消失和重新出现，这显然是一种不希望的效果。理想情况下，我们应阻止面板在屏幕外获得焦点，并仅允许在用户可以与其互动时获得焦点。
有时，您需要进行一些侦探工作，才能找出焦点所在的位置。您可以使用控制台中的 document.activeElement 来确定当前聚焦的元素。
知道焦点位于哪个屏幕外元素后，您可以将其设置为 display: none 或 visibility: hidden，然后再将其设回 display:
block 或 visibility: visible，然后再将其显示给用户。
一般来说，我们建议开发者在每次发布之前按 Tab 键浏览其网站，确保标签页顺序不会消失或跳出逻辑顺序。如果出现这种情况，您应确保使用 display: none 或 visibility: hidden 适当地隐藏屏幕外内容，或者重新排列 DOM 中元素的实际位置，使其处于逻辑顺序。