DOM 顺序至关重要

默认 DOM 顺序的重要性

戴夫·加什
Dave Gash
梅金·卡尼
Meggin Kearney

使用原生元素是了解焦点行为的绝佳方式,因为系统会根据这些元素在 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 更改元素在屏幕上的视觉位置时,请务必小心。这可能会导致标签页顺序看似随机,让依赖键盘的用户感到困惑。因此,Web AIM 核对清单在第 1.3.2 节中指出,阅读和导航顺序(由代码顺序确定)应符合逻辑且直观。

一般来说,请时常尝试按 Tab 键在网页中切换,这只是为了确保您不会不小心弄乱了 Tab 键顺序。这是一个很好的习惯,并且不需要太多努力。

屏幕外内容

如果您有内容当前未显示,但仍需要添加到 DOM 中,例如自适应侧边导航栏,该怎么办?如果您有此类元素在离开屏幕后获得焦点,那么当用户浏览网页时,看起来焦点会消失然后又重新出现,这显然是不希望出现的效果。理想情况下,我们应该防止面板在位于屏幕之外时获得焦点,而仅允许在用户可以与其互动时获得焦点。

屏幕外的滑入式面板可能会窃取焦点。

有时,您需要花点侦探工作才能弄清楚焦点去了哪里。您可以使用控制台中的 document.activeElement 来确定当前获得焦点的元素。

知道哪个屏幕外元素获得焦点后,您可以将其设为 display: nonevisibility: hidden,再重新设为 display: blockvisibility: visible,然后再向用户显示。

设置为不显示任何内容的滑入式面板。
一个设为显示区块的滑入式面板。

一般来说,我们鼓励开发者在每次发布之前按 Tab 键浏览其网站,确保标签页顺序不会消失或不按逻辑顺序排列。如果会,您应确保使用 display: nonevisibility: hidden 适当地隐藏了屏幕外内容,或者重新排列元素在 DOM 中的物理位置,使其按逻辑顺序排列。