弹窗打开后给背景容器加了 aria-hidden 表示不可交互,检测工具却报 aria-hidden-focus,提示里面还有可聚焦元素,键盘 Tab 也确实还能进去。乍看像缓存或者权限的锅,追下去往往不是。

<div id='page' inert>…</div>
<div role='dialog' aria-modal='true'>…</div>
<!-- inert 同时解决焦点和朗读 -->

追下去是这么回事:aria-hidden 只影响可访问树,不会让元素失去焦点能力。容器里的链接和按钮仍然在 Tab 序列里,用户能聚焦到读屏完全不播报的控件上。

「aria-hidden 焦点」相关的验证我通常做两遍,改完一次、隔天再看一次,确认不是临时生效。验证用真实数据走一遍,测试数据太干净,边界情况根本碰不到。

能分两步做的操作就别合成一步,中间看一眼返回值,出问题好判断。报错里带路径的,先去看那个路径在不在、权限对不对。

具体做法是,给背景容器里所有可聚焦元素加 inert 属性,一次性移出焦点序列和可访问树;不支持 inert 的旧浏览器用 tabindex 负一兜底,并记住原值以便恢复;关闭弹窗时把 inert 和 tabindex 一并还原,别留下无法操作的区域。

验收就看一点,弹窗打开后按 Tab 只在弹窗内循环,检测工具不再报 aria-hidden-focus。

作者 9823189