推荐两个稳定跨浏览器的视觉隐藏方案：clip-path: inset(50%) 裁剪为0×0点，元素仍参与布局且可被屏幕阅读器解析；position: absolute; left: -9999px; top: -9999px; 配合显式 width/height，确保语义保留。
需要隐藏视觉但保留可访问性，用 clip-path 或 position: absolute 移出视口
直接写 display: none 或 visibility: hidden 都会让屏幕阅读器跳过内容——这不是 bug，是规范行为。真正能“藏眼睛、不藏耳朵”的方案，得让元素仍在 DOM 中、有语义、尺寸非零，但视觉上不可见。
推荐两个稳定跨浏览器的写法：
-
clip-path: inset(50%)：裁剪成一个 0×0 的点，元素仍参与布局、可被getBoundingClientRect()读取，屏幕阅读器照常解析 -
position: absolute; left: -9999px; top: -9999px;：老但可靠，注意要加width和height（否则某些读屏器可能忽略）
别用 opacity: 0 ——它虽然保交互、保尺寸，但屏幕阅读器会读，而视觉用户又看到透明占位，容易误判为 bug。
aria-hidden="false" 不起作用？别设这个属性
aria-hidden 是个开关，false 表示“不隐藏”，但它不能把已被 CSS 彻底移出渲染树的元素拉回来。比如你对一个 display: none 元素加了 aria-hidden="false"，毫无意义——DOM 节点还在，但渲染引擎根本没把它画进任何层，屏幕阅读器连扫描都扫不到。
立即学习“前端免费学习笔记（深入）”；
真正该做的是：
- 确保元素在 HTML 中存在且未被
display: none或visibility: hidden锁死 - 用视觉隐藏技术（如上面的
clip-path）只影响绘制阶段，不碰布局和语义 - 必要时补
tabindex="-1"控制键盘焦点流，但别乱加aria-hidden
为什么不用 visibility: hidden + aria-hidden="false"？
因为 visibility: hidden 本身就会让屏幕阅读器跳过内容，加 aria-hidden="false" 也救不回来。W3C 明确规定：当元素不可见（无论通过 visibility、opacity 还是 display），且没有其他 ARIA 声明覆盖时，辅助技术默认忽略它。
常见错误写法：
.sr-only { visibility: hidden; aria-hidden: false; }
这行不通。aria-hidden="false" 不是“强制可见”，而是“不主动隐藏”；前提是元素本身得在可访问性树里——而 visibility: hidden 已经把它踢出去了。
最简可用的工具类写法
直接复制粘贴这段就能用，已验证 Chrome + NVDA / Safari + VoiceOver：
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
clip-path: inset(50%);
border: 0;
}
注意两点：
-
clip是旧语法，clip-path是新标准，两者共存是为了兼容 IE 和旧 Safari - 必须设
width/height，否则某些读屏器认为“无内容”而跳过
真正容易被忽略的是：这个类一旦用在动态插入的元素上，如果 JS 后续又给它加了 display: none，整个可访问性就崩了——视觉和语义彻底脱钩，而且很难 debug。
