默认 DOM 顺序的重要性
使用原生元素是了解焦点行为的好方法,因为它们会根据它们在 DOM 中的位置自动插入到 Tab 键顺序中。
例如,您可能有三个按钮元素,在 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 节中指出,阅读和导航顺序(由代码顺序决定)应该合乎逻辑且直观。
一般来说,应尽量经常在网页中循环跳格,这完全是为了确保您没有无意中弄乱了跳格顺序。这是一种很好的习惯,而且不需要太多精力。
屏幕外内容
如果您有一些内容当前未显示,但仍需要在 DOM 中呈现(例如自适应侧边导航栏),该怎么办?如果您有此类元素在离屏时获得焦点,在用户反复浏览页面时,焦点似乎消失后再重新出现 - 这显然是一种不良效果。理想情况下,我们应防止面板在位于屏幕外时获得焦点,只允许它在用户能够与其互动时获得焦点。
![屏幕外的滑入式面板可能会窃取焦点。](https://web.developers.google.cn/static/articles/dom-order-matters/image/an-offscreen-slide-panel-418516732500b.png?authuser=5&hl=sk)
有时,你需要做点侦探工作才能弄清楚焦点的下落。您可以使用控制台中的 document.activeElement
来确定当前获得焦点的元素。
知道哪个屏幕外元素获得焦点后,就可以将其设为 display: none
或 visibility: hidden
,然后将其设为 display:
block
或 visibility: visible
,然后再向用户显示。
![滑入式面板设置为不显示任何内容。](https://web.developers.google.cn/static/articles/dom-order-matters/image/a-slide-panel-set-displ-4e959c65a9e47.png?authuser=5&hl=sk)
![设置为显示区块的滑入式面板。](https://web.developers.google.cn/static/articles/dom-order-matters/image/a-slide-panel-set-displ-ccba12904336f.png?authuser=5&hl=sk)
一般来说,我们建议开发者在每次发布之前在自己的网站中按 Tab 键,确保 Tab 键顺序不会消失或脱离逻辑顺序。如果是,您应确保使用 display: none
或 visibility: hidden
正确隐藏屏幕外内容,或者重新排列元素在 DOM 中的物理位置,使其按逻辑顺序排列。