aria-hidden="true"仅隐藏元素及其后代对辅助技术的可访问性，不影响视觉显示；常被误用于交互元素或与sr-only类混用，正确场景限于纯装饰性内容。
aria-hidden="true" 到底隐藏了什么
它只对辅助技术（如读屏软件）隐藏元素，不影响视觉呈现——这点最容易误解。很多人加了 aria-hidden="true 还以为页面上也看不见了，结果用户看到空白区却听不到说明，反而更困惑。
常见错误现象：aria-hidden="true" 加在包含交互子元素的容器上（比如按钮父级 div），导致子按钮无法被读屏聚焦；或加在图标 <i class="icon"></i> 上却忘了同步给它加 role="presentation" 或文本替代。
- 仅用于纯装饰性内容：空图标、分隔线、背景花纹等
- 绝不能加在有
tabindex、button、a等可交互元素上，除非你明确想屏蔽其语义 - 如果图标旁已有可见文字（如“搜索”+放大镜 icon），给图标加
aria-hidden="true"是安全的
screen reader only 的正确写法
CSS 隐藏 + aria-hidden 不等于“仅屏幕阅读器可见”。真要实现“视觉隐藏但读屏可读”，得用专门的无障碍隐藏类，靠 position: absolute; left: -9999px; 这类方式移出视口，同时确保不触发 aria-hidden。
错误用法：<span aria-hidden="true" class="sr-only">提交</span> —— 两个逻辑冲突，读屏直接跳过。
立即学习“前端免费学习笔记（深入）”；
- 推荐最小化 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; } - 配合语义：用
<span class="sr-only">上传文件</span>替代无意义的 “点击这里” - 不要用
display: none或visibility: hidden，它们会让读屏完全忽略内容
role="presentation" 和 aria-hidden="true" 的区别
role="presentation" 是让元素“放弃自身语义”，但子元素仍保留原有角色；aria-hidden="true" 是让整个元素及其后代对辅助技术不可见。选错会导致结构断裂。
典型场景：表格中纯装饰的空单元格、SVG 内部路径、Bootstrap 的 .carousel-indicators 容器。
- SVG 图标外层
<svg role="presentation"></svg>→ 允许内部<title></title>被读取（若需要） - 轮播指示器容器加
aria-hidden="true"→ 整个导航点列表对读屏不可见，适合已有其他语音提示时 - 别混用：同时写
role="presentation" aria-hidden="true"没意义，后者已覆盖前者
动态内容更新时 aria-hidden 的陷阱
用 JavaScript 显示/隐藏区域时，如果只改 display 或 visibility，但忘了同步更新 aria-hidden，读屏会停留在旧状态——比如弹窗打开后，背景区域仍可被聚焦，或弹窗内容根本没被通告。
错误模式：el.style.display = 'block'; 却没设 el.setAttribute('aria-hidden', 'false');
- 显示一个区域前：先设
aria-hidden="false"，再设display: block（避免闪现时读屏错过） - 隐藏时反之：先
aria-hidden="true"，再display: none - 对模态框，记得同时管理
aria-modal="true"和焦点锁（focus trap），单靠aria-hidden不够
最常被忽略的是：服务端渲染页面里，初始 HTML 已带 aria-hidden="true"，但 JS 初始化后没根据真实状态重置它——这种静态写死的属性，在动态 UI 中基本等于无效。
