隐藏辅助文本必须对屏幕阅读器可读且对视觉用户不可见，应使用.sr-only类而非display:none或aria-hidden="true"，因其通过绝对定位、尺寸归零、溢出裁剪等确保无障碍可用性。
隐藏辅助文本不是“藏起来就完事”，它必须同时满足两个条件：对屏幕阅读器可读，但对视觉用户不可见。用 display: none 或 visibility: hidden 会直接让辅助技术也读不到，这反而破坏无障碍。
用 .sr-only 类实现真正的辅助文本隐藏
这是最稳妥、被主流框架（如 Bootstrap、Tailwind）广泛采用的方式。它通过绝对定位 + 尺寸归零 + 溢出裁剪 + 透明度控制，确保元素不占布局空间、不可见、不触发焦点，但保留在辅助技术树中。
-
position: absolute把元素移出文档流，避免影响布局 -
width: 1px、height: 1px、padding: 0、margin: -1px防止残余占位 -
overflow: hidden和clip: rect(0, 0, 0, 0)（或现代clip-path: inset(50%)）彻底裁掉渲染区域 -
white-space: nowrap防止长文本换行撑开微小尺寸
示例 CSS：
.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;
}
别把 aria-hidden="true" 当成视觉隐藏开关
aria-hidden="true" 的作用非常单一：只告诉屏幕阅读器“跳过这个节点”。它对视觉呈现、DOM 结构、CSS 渲染、打印样式、键盘焦点完全无影响。
- 给一个
加aria-hidden="true"，按钮依然可见、可 Tab、可点击——只是读屏不读它，这会造成语义断裂 - 用它隐藏导航栏中的“跳转到主内容”链接？错。那链接本该被读屏优先识别，应保留
aria-hidden="false"或直接去掉该属性 - 真正适合的场景只有：纯装饰性图标（如
）、模态框开启时给背景容器加该属性（防止读屏误读底层内容）
hidden 属性和 type="hidden" 的用途完全不同
hidden 是 HTML5 布尔属性，作用是“让浏览器忽略该元素的渲染和辅助技术暴露”，但它仍存在于 DOM 中；而 是表单控件，专用于提交数据，不参与任何可访问性树，也不渲染。
-
-
：只在表单提交时发往后端，前端 JS 可读写，但永远不该放需被读屏识别的文本 - 混淆两者会导致：本该被读屏朗读的操作说明被
hidden吃掉；或把敏感 token 放进，结果被爬虫或恶意脚本轻易提取
真正难的不是写对一行 CSS，而是每次加辅助文本前，先问一句：这个信息，是给谁看的？如果答案是“只给屏幕阅读器”，那视觉隐藏方案就必须和可访问性暴露机制解耦——display: none 和 aria-hidden 都不能单独扛起这个责任。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
