clip-path: inset(100%)是目前最推荐的无障碍友好型隐藏方式，它使元素视觉消失、不占空间、不触发重排，同时保留dom结构和屏幕阅读器可访问性。
直接用 display: none 或 visibility: hidden 会切断屏幕阅读器访问，不是“优雅”的隐藏 —— 真正兼顾可访问性的隐藏，必须让视觉不可见，但语义仍可被辅助技术读取。
用 clip-path: inset(100%) 实现视觉隐藏 + 可访问保留
这是目前最推荐的“无障碍友好型”隐藏方式：元素完全不可见、不占位（脱离渲染流），但 DOM 结构完整，屏幕阅读器仍能解析内容。
-
clip-path: inset(100%)将裁剪区域设为整个元素外侧，等效于“裁掉全部”，视觉上消失 - 不触发重排（reflow），性能优于
display: none - 兼容性已较好（Chrome 55+、Firefox 54+、Safari 15.4+、Edge 79+），旧版 Safari 可加
-webkit-clip-path前缀 - 注意：不能用于
inline元素（如<span></span>），需先设display: block或inline-block
示例：
.sr-only {
clip-path: inset(100%);
-webkit-clip-path: inset(100%);
/* 保险起见，再加基础兜底 */
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
border: 0;
}
为什么不用 opacity: 0 或 visibility: hidden？
它们看似“保留 DOM”，实则对可访问性有隐性破坏：
-
opacity: 0：元素仍可交互（pointer-events: auto默认），可能意外触发焦点或点击；屏幕阅读器虽能读取，但用户看到空白区域却无反馈，体验割裂 -
visibility: hidden：W3C 明确指出该属性 *不* 隐含语义隐藏，多数屏幕阅读器仍会朗读内容，但用户无法聚焦或操作它，造成“可听不可用”的矛盾 - 二者都保留占位空间，容易引发布局跳动（尤其在动态显示/隐藏时）
必须配合 aria-hidden="false" 吗？
不需要，也不建议主动加 aria-hidden="false" —— 它是默认值，显式声明反而冗余。真正要关注的是：
- 若隐藏的是纯装饰性内容（如图标旁的重复文字），才应设
aria-hidden="true" - 若隐藏的是功能关键内容（如“跳转到主内容”链接），必须确保它未被任何 CSS 方式逻辑屏蔽，且能被键盘
Tab访问到 - 避免同时使用
display: none和aria-hidden="false"：前者已移除语义，后者无效
最易被忽略的一点：所谓“优雅”，不在于技术多新潮，而在于是否尊重了不同用户的访问路径。一个被 clip-path 隐藏的“返回顶部”按钮，对鼠标用户不可见，但对盲人用户仍是可触达的操作入口 —— 这种分离，才是可访问性设计的底层逻辑。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
