C6.05.4Hidden elements out of tab order设计研究

隐藏元素不得留在焦点序列中

别名: 隐藏仍可聚焦 · 离屏焦点 · aria-hidden

概念解释

视觉上已经不可见的控件——被折叠的区块、关掉的选项卡、移出视口的离屏菜单、display 以外的方式藏起来的按钮——不应再出现在 Tab 序列里。人按 Tab 时焦点会跳进一块空白或跳过一大段“什么都没发生”的间隔,然后突然出现在别处。隐藏是视觉事实,焦点序列必须同步变成同一事实。

机制

CSS 的可见性和可聚焦性不是同一开关。opacity: 0visibility: hidden、移到屏幕外、用零高度折叠,元素往往仍可聚焦;display: nonehidden 属性通常会把它从序列里拿掉。aria-hidden 告诉辅助技术不要读,却不自动禁止聚焦,结果是屏幕阅读器跳过、键盘用户却能停在上面。未卸载的路由、预渲染的抽屉、轮播里不在当前帧的幻灯片,都会留下一套看不见但仍能接收空格和回车的控件。失败形态有两种:焦点在空白处“吞掉”若干次 Tab,以及隐藏按钮被意外激活。两者都来自“画没画”和“能不能聚焦”各管各的。

怎么研究

对每个有显隐切换的组件,在隐藏态下把 Tab 走完整页,记录焦点是否进入不可见节点、以及隐藏控件能否被空格激活。自变量包括隐藏手法(display、visibility、离屏、aria-hidden)、组件类型;因变量包括隐藏态下的可聚焦节点数、空白跳跃次数和误激活。只看隐藏时截图为空白会漏掉序列问题。需要在无指针条件下走,并开一份焦点描边以便看见落点。

边界

离屏但用来做“跳到主内容”的链接是故意放在序列开头的,不属于误留。用视觉隐藏、供屏幕阅读器阅读的文字也不应聚焦,除非它本身是控件。动画进行中的暂态(正在滑出的抽屉)可能短时间既可见又可聚焦,应在动画结束时再切序列,而不是在动画开始时就拆除,以免焦点被瞬时夺走。

怎么落地

  • 隐藏可聚焦控件时使用会把它移出序列的方式,或同时设置 inert / tabindex="-1";不要只靠透明度和离屏定位。
  • aria-hidden="true" 的子树里不得再有可聚焦节点;两者必须一起关。
  • 在每个折叠、选项卡和抽屉的关闭态做一次整页 Tab 走查,统计进入不可见区域的跳数,目标为零。

延伸

  • 同组C6.05.1 Tab 顺序应与视觉阅读顺序一致 · C6.05.2 焦点必须可见 · C6.05.3 浮层需捕获焦点并在关闭后归还
  • 相邻C6.22 焦点顺序与键盘导航 · C6.06 软键盘与屏幕占用
  • 站内检索inert · aria-hidden · hidden focus

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/C6.05.4