默认 DOM 顺序的重要性
使用原生元素是了解焦点行为的好方法 因为系统会根据其 在 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 键顺序。最好养成这样的习惯 不需要太多精力
屏幕外内容
如果您有一些内容当前没有显示,但仍然需要显示,该怎么办? (例如自适应侧边导航栏)?如果您有像这样的元素 当它们离开屏幕时,获得焦点,看起来就像是焦点位于 当用户在网页间循环浏览时,该窗口会消失并重新出现 - 这显然是 会产生不良影响。理想情况下,我们应防止面板获得焦点 当它在屏幕外时,仅在用户可以互动时聚焦于此 。
![屏幕外的滑入式面板可能会窃取焦点。](https://web.dev/static/articles/dom-order-matters/image/an-offscreen-slide-panel-418516732500b.png?authuser=0000&hl=zh-cn)
有时你需要做点侦探工作,才能弄清楚
消失了。您可以使用控制台中的 document.activeElement
来找出
元素当前获得焦点。
知道获得焦点的是哪个屏幕外元素后,您就可以将其设置为
display: none
或 visibility: hidden
,然后将其设置回 display:
block
或 visibility: visible
,然后再向用户显示。
![滑入式面板设置为不显示任何内容。](https://web.dev/static/articles/dom-order-matters/image/a-slide-panel-set-displ-4e959c65a9e47.png?authuser=0000&hl=zh-cn)
![设置为显示区块的滑入式面板。](https://web.dev/static/articles/dom-order-matters/image/a-slide-panel-set-displ-ccba12904336f.png?authuser=0000&hl=zh-cn)
一般来说,我们鼓励开发者在浏览每个网页前
发布,以确保制表符顺序不会消失或脱离逻辑顺序
序列。如果包含,您应该确保以适当的方式
与display: none
或visibility: hidden
分享屏幕外内容,或
重新排列元素在 DOM 中的实际位置,因此它们处于逻辑
订单。