默认 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 更改元素在屏幕上的视觉位置时，请务必小心谨慎。这可能会导致 Tab 键顺序出现跳动，看似是随机的，让依赖键盘的用户感到困惑。因此，Web AIM 核对清单在第 1.3.2 节中指出，阅读和导航顺序（由代码顺序决定）应该合乎逻辑且直观。
一般来说，应时常尝试在网页中使用 Tab 键，以确保您没有无意中弄乱了 Tab 键顺序。这是个值得养成的好习惯，并且也不会增加多少工作量。
屏幕外内容
如果您有一些内容当前未显示，但仍需要在 DOM 中呈现（例如自适应侧边导航栏），该怎么办？如果您有这种位于屏幕之外时获得焦点的元素，当用户在页面中循环跳格时，看起来就好像焦点消失后又再次出现，这显然不是您想要的效果。理想情况下，我们应该防止面板在位于屏幕之外时获得焦点，只允许它在用户可以与其进行交互时获得焦点。
有时，您需要做点侦探工作才能搞清楚焦点的下落。您可以使用控制台中的 document.activeElement 来了解当前获得焦点的元素。
知道哪一个屏幕外元素获得了焦点后，就可以将其设置为 display: none 或 visibility: hidden，然后恢复其原来的设置 display:
block 或 visibility: visible，最后再显示给用户。
一般来说，我们建议开发者在每次发布之前在自己的网站中按 Tab 键，确保 Tab 键顺序不会消失或脱离逻辑顺序。如果是，您应确保使用 display: none 或 visibility: hidden 正确隐藏屏幕外内容，或者重新排列元素在 DOM 中的物理位置，使其按逻辑顺序排列。