aria-hidden="true”仅屏蔽辅助技术读取，不影响视觉显示、DOM结构、焦点或交互；仅适用于纯装饰性元素（如SVG图标）或模态框开启时的背景区域，严禁用于可交互元素及其容器。
aria-hidden="true" 不能防止辅助工具读取“隐藏内容”，它只告诉读屏软件跳过当前节点
很多人以为加了 aria-hidden="true" 就能让内容“既看不见也不被读”，结果页面上空白一片，读屏却完全没提示——这不是 bug，是设计使然。aria-hidden="true" 的作用非常窄：它仅影响可访问性树，对视觉、DOM 活性、焦点流、表单提交、搜索引擎索引全部无感。
常见错误现象包括：
- 给包含
<button>的容器加aria-hidden="true"，导致按钮仍可 Tab 进入、可点击，但读屏沉默——用户卡在焦点里却不知所措 - 在模态框关闭后忘记移除背景区域的
aria-hidden="true"，读屏持续跳过本该恢复的内容 - 对图标
<i class="icon"></i>单独加aria-hidden="true"，却不处理其父级按钮的语义冗余，引发重复播报
什么情况下该用 aria-hidden="true"
它只适用于两类场景：纯装饰性内容，或需视觉保留但语义上“不该被读”的节点。关键判断标准是：该元素是否承载功能、是否需要被键盘操作、是否参与语义流。
- ✅ 安全用法：
<svg aria-hidden="true"><path d="..."></svg>（按钮内纯图标），<div class="carousel-dots" aria-hidden="true">...（轮播指示器） - ✅ 合理用法：模态框开启时，给
<div class="modal-backdrop">加aria-hidden="true"，阻止读屏误读被遮盖的主内容 - ❌ 绝对禁用：
<button aria-hidden="true">删除</button>、<input aria-hidden="true">、任何带tabindex或可交互子元素的父容器
为什么不能和 hidden 属性混用
hidden 是 DOM 级别移除，aria-hidden="true" 是无障碍树级屏蔽，二者机制冲突。浏览器行为不一致，部分读屏器会忽略 aria-hidden，只按 hidden 处理；另一些则因属性共存产生未定义行为。
立即学习“前端免费学习笔记（深入）”；
- 错误写法：
<div hidden aria-hidden="true">...</div>→ axe 工具直接报错 “conflicting visibility attributes” - 如果目标是彻底移除（视觉 + 可访问性 + 交互），只用
hidden；如果目标是视觉可见但读屏跳过，只用aria-hidden="true" - 服务端渲染时尤其注意：SSR 输出含
hidden的节点，若 hydration 延迟，可能闪现；必须加 CSS 兜底：[hidden] { display: none !important; }
真正控制读屏播报的是 ARIA 状态同步，不是隐藏属性
读屏是否正确读出“展开/收起”“选中/未选中”，取决于 aria-expanded、aria-checked 等状态属性是否与 UI 实时一致，而不是靠先藏再显来“触发播报”。
- 下拉菜单切换时，必须同步更新
aria-expanded和焦点位置，否则读屏要么静默，要么报错状态 - 用
innerHTML替换含aria-live区域的内容，会导致变化被跳过；应使用textContent或 DOM 插入方式保证可访问性树更新 - 图标按钮内文字重复播报，根源是语义结构冗余（如
<button><span>图标</span>提交</button>），解决办法是给非文本节点加aria-hidden="true"，而非藏整个按钮
