visually-hidden 类通过绝对定位、裁剪、透明化等 CSS 技巧实现视觉隐藏但保留在可访问性树中，避免使用 display: none 或 aria-hidden="true"，需确保语义完整与焦点可用。
用 visually-hidden 类隐藏内容但保留在可访问性树中
直接说结论：纯 CSS 实现「视觉上消失，但屏幕阅读器仍能读取」，靠的是 visually-hidden 这类经典模式，不是 display: none 或 visibility: hidden —— 后两者会彻底移出可访问性树，对残障用户不可见。
核心思路是把元素移出视口、缩到极小、透明、不占布局空间，但不切断语义连接。主流框架（如 Bootstrap、USWDS）都内置了类似实现，自己写时注意几个关键点：
-
position: absolute+clip: rect(0 0 0 0)（旧写法）或更现代的clip-path: inset(50%) - 必须加
white-space: nowrap，否则换行可能让文字意外露出 - 避免用
font-size: 0或text-indent: -9999px，前者影响部分屏幕阅读器解析，后者在 flex/grid 容器里可能失效 - 如果元素内含交互控件（如按钮），需额外确保
focusable状态不受影响 —— 不要加tabindex="-1"除非你明确想禁用键盘聚焦
为什么不用 aria-hidden="true" 配合视觉隐藏？
常见误解：先视觉隐藏，再加 aria-hidden="true"「双重保险」。错。这反而会让屏幕阅读器完全跳过内容，违背初衷。
visually-hidden 的设计目标就是「仅视觉隐藏」，语义和可访问性状态必须保持原样。所以：
立即学习“前端免费学习笔记（深入）”；
- 不要给
visually-hidden元素加aria-hidden="true" - 如果内容本就不该被读取（比如纯装饰图标），那就用
aria-hidden="true"+role="presentation"，而不是视觉隐藏类 - 图标+文本组合场景（如带图标的按钮），应把
visually-hidden用在文本上，图标用aria-hidden="true"，而非反过来
React/Vue 中动态控制 visually-hidden 的坑
框架里常通过条件 class 控制显隐，例如：className={\`btn \${isHidden ? 'visually-hidden' : ''}\`}。这里容易忽略两点：
- SSR（服务端渲染）时若初始状态为隐藏，
visually-hidden类会随 HTML 一起输出，但某些 SSR 框架（如 Next.js App Router）对 CSS-in-JS 支持不一，导致首屏样式未加载就已应用类名 → 出现闪动或布局塌陷 - Vue 的
v-show底层用display: none，和visually-hidden逻辑冲突，混用会导致可访问性断裂 - 推荐做法：始终用
class切换，配合 CSS 优先；需要动画过渡时，用opacity+transform替代 display 控制，再叠加visually-hidden的最终态
测试 visually-hidden 是否真生效
不能只靠眼睛看「没了」，得验证三件事：
- 浏览器检查器里确认元素仍在 DOM 中，且没有
display: none或visibility: hidden - 用 Chrome DevTools 的「Accessibility」面板，选中该元素，看
Role和Name是否正常，Visible字段是否为false（表示视觉不可见但语义存在） - 实际用 VoiceOver（macOS）或 NVDA（Windows）朗读页面，确认内容被读出，且无冗余停顿或重复
- 特别注意表单场景：被
visually-hidden的label必须仍通过for/id或嵌套方式关联到对应input，否则无障碍表单验证会失败
最易被忽略的是响应式断点下的行为 —— 某些 visually-hidden 类会在 @media (min-width: 768px) 里取消隐藏，但忘了同步移除 clip-path 或重置 position，结果在平板上内容既看不见又无法聚焦。
