sr-only 类标准写法是：.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }，确保不移除语义且兼容屏幕阅读器。
sr-only 类怎么写才不被屏幕阅读器跳过
直接给结论：用 sr-only 类隐藏视觉内容但保留给屏幕阅读器读取，关键不是“隐藏”，而是“不移除语义、不阻断可访问性流”。很多人抄了 CSS 却发现 NVDA 或 VoiceOver 就是不读，问题往往出在样式优先级或 display 属性上。
标准写法要同时切断视觉渲染路径，又不能切断 ARIA 流程：
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
-
clip: rect(0, 0, 0, 0)比clip-path兼容性更好（IE9+ 支持），后者在旧版 Safari 和部分 Android WebView 中会彻底静音文本 - 不能用
display: none或visibility: hidden—— 这两类会直接从可访问树中移除节点，屏幕阅读器根本看不到 - 如果父容器有
overflow: hidden，且sr-only元素靠边定位，可能被裁掉导致读不出来；建议加left: 2px微调避让
React/Vue 里用 sr-only 怎么避免 SSR 和 hydration 不一致
服务端渲染时，sr-only 样式还没加载，元素会短暂“闪现”在页面上；客户端 hydration 后又突然消失，不仅影响体验，还可能触发屏幕阅读器重复播报。
- 把
sr-only的 CSS 提前内联到<head>，或确保它在 JS 执行前已就绪（比如用critical CSS） - Vue 中慎用
v-show包裹sr-only文本 —— 它靠display: none切换，会导致可访问性中断；改用v-if或纯 CSS 控制 - React 中若用
useEffect动态添加类名，首次渲染时屏幕阅读器可能读不到内容；应默认带sr-only类，逻辑控制是否渲染该元素本身
替代方案：什么时候不该用 sr-only，而该用 aria-label 或 aria-hidden
sr-only 是“藏内容但留语义”，但很多场景它反而是错的入口。比如按钮图标没文字，只靠 sr-only 写“提交”，不如直接用 aria-label="提交"——更轻量、无样式依赖、不会因 CSS 加载失败失效。
将调研报告、方案对比、数据分析、需求梳理、会议纪要、设计说明、代码评审、学习笔记等任务产物输出为可在浏览器直接打开的单文件 HTML，替代 Markdown 作为最终交付物。Markdown 在信息密度、视觉清晰度和可分享性上已跟不上 AI 产物的丰富度，HTML 能同时承载排版、表格、SVG 等。
立即学习“前端免费学习笔记（深入）”；
- 图标按钮、纯 SVG 操作区：优先用
aria-label或aria-labelledby，而不是塞<span class="sr-only">删除</span> - 装饰性图片、分隔线、空占位符：用
aria-hidden="true"+role="presentation"，别硬套sr-only—— 它本意是“对人隐藏、对机器可见”，而这类元素对谁都该不可见 - 表单错误提示动态插入时：如果提示文本和输入框无 DOM 邻接关系，
sr-only不如aria-describedby可靠，后者能明确建立关联
Chrome DevTools 里怎么快速验证 sr-only 是否生效
别只看“页面没显示就以为 OK”，得进可访问树确认。打开 Chrome DevTools → 切到 Accessibility 面板 → 左侧选中目标元素 → 右侧看 AXNode 的 AXName 和 AXValue 是否包含你期望的文本。
- 如果
AXName是空，检查是否被aria-hidden="true"父级封禁，或样式中误加了display: none - 如果文本出现但读得飞快/断句错乱，可能是
white-space: nowrap导致长文本挤成一行，去掉它或改用overflow-wrap: break-word - 移动端测试别只信模拟器：真机用 VoiceOver（iOS）或 TalkBack（Android）试，某些
clip行为在移动浏览器中表现不同
最麻烦的点其实是嵌套：一个 sr-only 里面再包个 aria-hidden="true"，或者父容器用了 transform，都可能让可访问树直接丢掉整块节点——这种问题没法靠肉眼或简单检查发现，必须逐层 inspect AXNode。
