仅当元素纯装饰性且对屏幕阅读器用户无任何语义价值时才用 aria-hidden="true"，如图标字体、重复分隔线等；它不影响视觉呈现和键盘焦点，但会使辅助技术“静音”该元素，误用会导致可聚焦却不可读的无障碍问题。
aria-hidden="true" 什么时候该用
只有当某个元素纯粹是装饰性、纯视觉辅助，且对屏幕阅读器用户毫无语义价值时，才考虑加 aria-hidden="true"。比如图标字体（）、重复的分隔线、背景图对应的空 <div>、或已通过其他方式（如 alt）提供替代文本的图片容器。
别把它当成“隐藏内容”的通用开关——它只影响辅助技术，不影响视觉呈现，也不影响键盘焦点。如果元素需要被聚焦（比如一个可点击的关闭按钮），却设了 aria-hidden="true"，就会导致键盘用户能 tab 进去，但读屏软件完全念不出来，这是典型反模式。
常见误用：和 display: none 混淆
aria-hidden="true" 和 CSS 的 display: none 完全不是一回事：
-
display: none同时移除视觉渲染和辅助树节点，屏幕阅读器根本看不到它 -
aria-hidden="true"元素还在 DOM 里、照样渲染、照样接收鼠标事件，只是辅助树里被“静音”了 - 如果用了
aria-hidden="true"却没处理键盘焦点（比如没加tabindex="-1"），用户按 Tab 键仍会停在这个“看不见但可聚焦”的元素上，造成困惑
嵌套内容要小心：子元素不会自动继承 aria-hidden
aria-hidden 不像 CSS 属性那样自然继承。父元素设了 aria-hidden="true"，它的子元素默认仍会被读屏软件读取——除非子元素也显式声明 aria-hidden="true" 或本身是不可访问的（比如 <script>、<meta>）。
立即学习“前端免费学习笔记（深入）”；
典型翻车场景：
<div aria-hidden="true"> <button>这个按钮依然会被朗读</button> <span>这段文字也照读不误</span> </div>
正确做法是：要么给每个子交互元素单独加 aria-hidden="true"，要么直接把整个容器用 display: none 或 visibility: hidden 隐藏（后者需配合 aria-hidden="true" 才真正屏蔽）。
替代方案比 aria-hidden 更安全的场景
很多本想用 aria-hidden="true" 的地方，其实有更语义化、更健壮的写法：
- 图标字体或 SVG 图标：用
<span aria-hidden="true"></span>包裹符号，同时在外层按钮或链接上写清aria-label（如<button aria-label="删除">...</button>） - 仅用于视觉排版的空元素：优先删掉它；实在需要（比如撑开间距），用
<div aria-hidden="true" role="presentation"></div> - 加载中的骨架屏：用
aria-busy="true"+aria-live="polite"告知状态变化，而不是粗暴隐藏
真正需要 aria-hidden 的地方不多，但一旦用错，问题往往藏得深——它不报错、不打断流程，只在屏幕阅读器里悄悄漏掉关键信息。动手前先问一句：这个元素对非视觉用户来说，真的“不存在”吗？
