.sr-only 类需用 position: absolute 配合 clip-path: inset(50%) 或 clip: rect(0,0,0,0) 实现视觉隐藏但屏幕阅读器可读，禁用 display: none/visibility: hidden，避免父容器 overflow: hidden 干扰，且不可用于 img 元素。
用 .sr-only 类实现视觉隐藏但屏幕阅读器可读
直接写 display: none 或 visibility: hidden 都会让屏幕阅读器跳过内容，必须用专门的「视觉隐藏」技术。Tailwind 不自带 .sr-only，得手动加进 CSS，否则无障碍就断了。
标准写法是结合 position: absolute、极小尺寸、clip 或 clip-path 裁剪，同时确保元素仍可聚焦、可读、不脱离可访问性树：
-
clip: rect(0, 0, 0, 0)是兼容性最广的裁剪方式（IE8+ 支持），但已废弃，现代项目建议换clip-path: inset(50%) - 必须设
position: absolute，否则clip在非定位元素上无效 - 不能依赖
overflow: hidden父容器——如果.sr-only用了left: -9999px偏移，父容器裁掉它，读屏器就读不到 - 别给
.sr-only元素加aria-hidden="true"，那等于白写
为什么 visibility: hidden 和 display: none 都不行
这两个属性在可访问性上效果一致：屏幕阅读器默认跳过它们包裹的内容。不是“偶尔失效”，而是规范行为。
-
display: none→ 元素彻底退出渲染树和可访问性树，getBoundingClientRect()返回全 0，offsetParent为null -
visibility: hidden→ 元素还在布局流里，尺寸、伪元素、offsetHeight全都正常，但可访问性树中仍不可见（除非显式设aria-hidden="false"，但不推荐） - 两者都不满足「视觉不可见 + 语义完整 + 可交互」三要素，不能替代
.sr-only
常见翻车点：按钮里套 .sr-only 却没补 aria-label
比如一个仅含图标的编辑按钮：<button><span class="sr-only">编辑用户资料</span><svg>...</svg></button>。问题在于：屏幕阅读器只读到 “button”，不读 .sr-only 里的文字——因为按钮本身没 aria-label，而 .sr-only 文本又没被正确关联。
- 修复方式一：给
<button></button>加aria-label="编辑用户资料"，删掉.sr-only冗余文本 - 修复方式二：保留
.sr-only，但把文字移到按钮内第一子节点，并确保无其他干扰文本节点 - 绝对不要把
.sr-only套在<img>上——alt才是它的语义出口，.sr-only在这里纯属多此一举
现代写法推荐：用 clip-path 替代 clip
clip 属性已被标记为废弃，clip-path: inset(50%) 是更干净、更易维护的替代方案，且支持动画（虽然 .sr-only 本身不需要动画）。
示例代码：
.sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
-
inset(50%)表示从四边各向内裁剪 50%，等效于完全遮住内容 - 必须保留
position: absolute，否则clip-path在静态定位元素上可能不生效或表现不一致 - 如果项目需支持 Safari 15.4 以下版本，仍得回退到
clip: rect(0, 0, 0, 0)，并加clip: rect(0, 0, 0, 0)作为降级
真正容易被忽略的是父容器的 overflow 和定位上下文——哪怕 .sr-only 写得再标准，只要它被一个 overflow: hidden 的 position: relative 父级包着，偏移后就会被裁掉，读屏器立刻失联。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
