Edge 的“朗读”（Read Aloud）功能默认跳过传统 CSS 视觉隐藏技术（如 clip + overflow: hidden）包裹的内容；需改用 position: absolute; left: -9999px 等无溢出、可被朗读的无障碍隐藏方案。
edge 的“朗读”（read aloud）功能默认跳过传统 css 视觉隐藏技术（如 `clip` + `overflow: hidden`）包裹的内容；需改用 `position: absolute; left: -9999px` 等无溢出、可被朗读的无障碍隐藏方案。
在构建可访问网页时，常需隐藏某些文本的视觉呈现（例如补充说明、上下文提示），同时确保屏幕阅读器或浏览器朗读功能仍能识别并播报——这类需求催生了“视觉隐藏但语义保留”的 CSS 技术。然而，Microsoft Edge 内置的 Read Aloud 功能并非完全遵循标准屏幕阅读器行为：它对部分主流 .visually-hidden 实现（如 clip + overflow: hidden + 绝对定位）存在兼容性缺陷，会直接忽略其中的文本内容。
问题根源在于：Edge Read Aloud 依赖渲染树中元素的可遍历性与布局可见性判断逻辑，而 clip 和 clip-path: inset(50%) 配合 overflow: hidden 会导致该元素在朗读引擎中被判定为“不可读区域”，即使其语义节点仍在 DOM 中。
✅ 经验证有效的解决方案是采用位移式隐藏法（off-screen positioning），即通过绝对定位将元素移出视口左边界，既不触发水平滚动条，又保留其可读性：
.screenreader {
position: absolute;
left: -9999px;
width: auto;
height: auto;
margin: 0;
overflow: visible;
white-space: normal;
}
该方案优势显著：
AI代理的支出追踪与记账工具。支持记录消费、设定预算、生成支出报告及管理多币种财务，数据本地存储。具备Privacy.com卡片导入、自然语言查询及CSV/JSON导出功能。适用于代理进行消费并需要财务审计追踪的场景。
- ✅ Edge Read Aloud、NVDA、JAWS、VoiceOver 均能正常朗读；
- ✅ 不引入
overflow: hidden，避免长文本导致的意外水平滚动； - ✅ 无需
clip或clip-path，规避旧版 IE 兼容性与现代引擎解析差异； - ✅ 语义完整，不影响 DOM 结构与 ARIA 属性继承。
使用示例：
<p> Lucy <span class="screenreader">and Mary and Sue and Jemima and Zog and Olivia</span> Bob </p>
⚠️ 注意事项：
- 避免对
.screenreader元素设置display: none或visibility: hidden—— 这将彻底移除其可访问性；- 不建议仅依赖
font-size: 0或color: transparent，因部分朗读工具可能忽略无渲染尺寸或透明色文本；- 若需支持 RTL（从右向左）页面，可补充
right: -9999px; left: auto;并配合direction: rtl处理；- 在响应式场景中，确保该类不会因父容器
overflow: hidden被意外裁剪（虽极少见，但建议测试）。
总结：当面向 Edge Read Aloud 优化无障碍文本隐藏时，应优先选用位移式方案（left: -9999px），而非传统裁剪式方案。它简洁、可靠、跨朗读工具兼容性强，是当前最务实的工程实践选择。
