aria-hidden="true"仅对辅助技术隐藏元素及其子元素，不影响视觉显示；仅用于纯装饰性内容，禁用于可交互元素，不可替代display:none或visibility:hidden。
aria-hidden="true" 的作用非常明确：只让辅助技术（比如屏幕阅读器）忽略这个元素及其所有子元素，但页面上照常显示。它不是视觉隐藏指令，也不是语义覆盖开关，而是一条精准的“辅助功能树剔除指令”。
aria-hidden 该加在哪些元素上？
- 只用于纯装饰性内容：空图标（如
<i class="icon-star"></i>）、分隔线<hr>、背景花纹容器、无文本的 SVG 装饰图 - 图标旁已有可见文字说明时，可安全加在图标本身上（例如搜索按钮里的放大镜
<svg aria-hidden="true"></svg>） - 轮播指示器容器（
<div class="carousel-indicators">）若已有语音提示或标题，可整体加 <code>aria-hidden="true" - 绝对不要加在包含
button、a、带tabindex的div、或任何可能被键盘聚焦的元素上 -
display: none和visibility: hidden会让元素彻底从渲染树和辅助功能树中消失，屏幕阅读器完全读不到——这跟“隐藏装饰”目标不冲突，但会误杀本该保留的语义 - 更关键的是：它们同时影响视觉与辅助技术，而
aria-hidden是唯一能“视觉留着、读屏跳过”的解法 - 混用风险高：比如给一个
div加了display: none还额外写aria-hidden="true"，后者纯属冗余；反过来，只写aria-hidden="true"却没做视觉隐藏，用户看到空白区却听不到解释，体验更差 - 弹窗打开后，背景区域应设
aria-hidden="true"，否则读屏仍可聚焦遮罩下的按钮 - 模态框关闭后，必须移除其自身的
aria-hidden="true"，并恢复触发元素的焦点 - 切换过程中若没同步更新
aria-hidden，读屏状态会“卡住”——比如内容已替换，但旧文本还在被朗读 - 不要依赖框架自动处理：Radix UI 的
Dialog确实内置aria-modal="true"和焦点管理，但它不会自动给背景加aria-hidden，这部分得你手动控制
为什么不能用 display: none 或 visibility: hidden 替代？
动态切换时最容易漏掉什么？
JavaScript 控制显隐时，仅操作 CSS（如切换 class="hidden"）是不够的：
真正难的不是加不加 aria-hidden，而是判断“这个元素对辅助技术来说，是不是真的无意义”。很多所谓“装饰”，其实承担着视觉线索功能（比如颜色块表示状态），盲目隐藏反而破坏上下文。每次加之前，先问一句：如果读屏用户听不到它，还能准确理解当前界面在干什么吗？
