此页面由 Cloud Translation API 翻译。

DOM 顺序至关重要

默认 DOM 顺序的重要性

Dave Gash

Meggin Kearney

Rob Dodson

使用原生元素是了解焦点行为的好方法因为系统会根据其在 DOM 中的位置。

例如，您可能有三个按钮元素，在 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 键顺序。最好养成这样的习惯不需要太多精力

屏幕外内容

如果您有一些内容当前没有显示，但仍然需要显示，该怎么办？（例如自适应侧边导航栏）？如果您有像这样的元素当它们离开屏幕时，获得焦点，看起来就像是焦点位于当用户在网页间循环浏览时，该窗口会消失并重新出现 - 这显然是会产生不良影响。理想情况下，我们应防止面板获得焦点当它在屏幕外时，仅在用户可以互动时聚焦于此。

有时你需要做点侦探工作，才能弄清楚消失了。您可以使用控制台中的 document.activeElement 来找出元素当前获得焦点。

知道获得焦点的是哪个屏幕外元素后，您就可以将其设置为 display: none 或 visibility: hidden，然后将其设置回 display: block 或 visibility: visible，然后再向用户显示。

一般来说，我们鼓励开发者在浏览每个网页前发布，以确保制表符顺序不会消失或脱离逻辑顺序序列。如果包含，您应该确保以适当的方式与display: none或visibility: hidden分享屏幕外内容，或重新排列元素在 DOM 中的实际位置，因此它们处于逻辑订单。