Edge 浏览器的“朗读”功能无法识别标准 .visually-hidden 类中被裁剪（clip/clip-path）且 overflow: hidden 的内容；需改用 position: absolute; left: -9999px 方案，既确保屏幕阅读器可访问，又避免水平滚动条。
edge 浏览器的“朗读”功能无法识别标准 `.visually-hidden` 类中被裁剪（`clip`/`clip-path`）且 `overflow: hidden` 的内容；需改用 `position: absolute; left: -9999px` 方案，既确保屏幕阅读器可访问，又避免水平滚动条。
在构建无障碍 Web 应用时，“仅视觉隐藏但对辅助技术可见”的文本（如上下文补充、表单说明、图标旁隐式标签）至关重要。然而，主流 CSS 隐藏方案（如 clip + overflow: hidden + 绝对定位）虽被广泛推荐，却在 Microsoft Edge 的内置“朗读（Read Aloud）”功能中失效——该功能会完全跳过此类元素，导致语音输出不完整（例如 <p>Lucy <span class="visually-hidden">and</span> Bob</p> 仅读作 “Lucy Bob”）。
根本原因在于：Edge 的 Read Aloud 引擎（基于 Chromium 的语音合成管道）对 clip-path: inset(50%) 和 clip 属性的处理存在兼容性限制，且当 overflow: hidden 与极小尺寸（1px）结合时，会主动忽略其子文本的可访问性语义。
✅ 经实测验证的兼容方案是采用位移式隐藏（off-screen hiding），即：
.screenreader {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
}
⚠️ 注意：仅
left: -9999px即可触发 Edge Read Aloud 正常朗读，但建议保留clip: rect(0,0,0,0)和white-space: nowrap等辅助声明，以兼顾旧版 IE 屏幕阅读器（如 JAWS）及防止意外换行。
该方案优势显著：
飞书语音消息发送器。基于 Edge TTS，一键将文字转为语音发送到飞书。 使用场景： - 发送语音通知/提醒到飞书 - 文字转语音自动播报 触发词：飞书语音、语音发送、tts、文字转语音
- ✅ Edge Read Aloud、NVDA、VoiceOver、TalkBack 均能正确识别并朗读；
- ✅ 不引发水平滚动条（无论文本多长）；
- ✅ 保持 DOM 结构语义，不影响 tabindex 或焦点管理；
- ✅ 无需 JavaScript 干预，纯 CSS 可控。
? 使用示例：
<p> Lucy <span class="screenreader">and Mary and Sue and Jemima and Zog and Olivia...</span> Bob </p>
将准确朗读为：“Lucy and Mary and Sue and Jemima and Zog and Olivia... Bob”。
? 额外建议：
- 避免在
.screenreader中设置visibility: hidden或display: none—— 这会使所有辅助技术（包括朗读）完全不可见； - 若需动态显示/隐藏（如切换可见性），应通过
aria-hidden="true/false"配合 CSS 切换，而非仅依赖视觉样式； - 在自动化测试中，可通过
getComputedAccessibleName()或 axe-core 工具验证该元素是否被正确暴露给可访问性树。
综上，面对 Edge Read Aloud 的特殊行为，回归经典位移法（left: -9999px）是最简洁、可靠且跨辅助技术兼容的解决方案。
