默认 DOM 顺序的重要性
使用原生元素是了解焦点行为的绝佳方式,因为系统会根据这些元素在 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: none
或 visibility: hidden
,再重新设为 display:
block
或 visibility: visible
,然后再向用户显示。
一般来说,我们鼓励开发者在每次发布之前按 Tab 键浏览其网站,确保标签页顺序不会消失或不按逻辑顺序排列。如果会,您应确保使用 display: none
或 visibility: hidden
适当地隐藏了屏幕外内容,或者重新排列元素在 DOM 中的物理位置,使其按逻辑顺序排列。