clip属性已废弃，应使用visually-hidden类实现视觉隐藏但保留可访问性，其通过绝对定位移出视口并配合尺寸与溢出控制，确保屏幕阅读器可读且视觉不可见。
clip属性在现代CSS中已被废弃，别用它做可访问性隐藏
直接说结论：clip 属性（包括 clip: rect()）自 CSS 2.1 起就被标记为废弃，所有主流浏览器虽暂未移除，但已不推荐用于任何新项目。它对屏幕阅读器行为不可控，实际测试中常导致元素既不可见、又不可读，或相反——可见但被跳过。真正要实现“视觉隐藏但保留可访问性”，得换思路。
用visually-hidden类替代clip，兼容性与语义都稳
这是目前最可靠、被 WCAG 和主流框架（如 Bootstrap、USWDS）采用的方案。核心是把元素移出视口，同时避免 display: none 或 visibility: hidden 这类彻底移除可访问性的写法。
常见错误现象：
• 直接套用网上搜到的 clip: rect(1px, 1px, 1px, 1px) + position: absolute —— 在 Safari + VoiceOver 下可能完全静音
• 忘记加 white-space: nowrap，长文本换行后意外撑出可视区域
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用
position: absolute+left: -9999px（或100vw）更稳定，比clip兼容性好、意图清晰 - 必须配
width: 1px、height: 1px、overflow: hidden，防极端缩放下内容溢出 - 如果元素需响应式或动画，优先考虑
transform: translateX(-100%)+width: 0，但注意某些旧版 TalkBack 会忽略transform隐藏的元素
简短示例：
.visually-hidden {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: auto; /* 显式覆盖旧 clip 值，防继承 */
white-space: nowrap;
}aria-hidden=false不是万能解药，别和视觉隐藏混用
很多人以为加了 aria-hidden="false" 就能“强制可读”，其实这是误解。aria-hidden 是给开发者控制辅助技术是否忽略该节点的开关，但它不改变视觉状态，也不修复因 display: none 或 visibility: hidden 导致的 DOM 可访问性中断。
使用场景：
- 仅当元素本身视觉可见，但你明确想让屏幕阅读器跳过它时，才设
aria-hidden="true" -
aria-hidden="false"在绝大多数情况下是冗余的——默认就是false，不用显式声明 - 若你用了
visually-hidden类，就不要额外加aria-hidden，否则反而可能干扰读屏逻辑
检查是否真“可读”，别只信浏览器开发者工具
Chrome DevTools 的“Accessibility”面板只看 ARIA 属性和语义标签，不模拟真实读屏行为。很多看似合规的隐藏方式，在 NVDA + Firefox 或 VoiceOver + Safari 下表现完全不同。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 必须在至少两个组合下实测：NVDA + Chrome/Firefox，VoiceOver + Safari
- 关注焦点流：用
Tab键导航时，隐藏元素是否意外获得焦点？有tabindex="0"就危险 - 用屏幕阅读器朗读整页，确认隐藏文本被自然读出，且前后上下文连贯（比如“搜索”按钮旁的
visually-hidden文本应是“请输入关键词”，而不是孤零零一个词）
容易被忽略的一点：如果隐藏的是表单控件的 label，必须用 for / id 关联，不能只靠视觉位置——否则即使文本可读，也无法绑定到输入框，失去语义作用。
