应仅对纯装饰性、无语义且不参与交互的元素使用 aria-hidden="true"；若含文字、控件或可聚焦，则会导致屏幕阅读器跳过，造成可访问性问题。
什么时候该用 aria-hidden="true"
只对纯装饰性、无语义、不参与交互的元素用 aria-hidden="true。比如图标字体（）、背景花纹、分隔线、空占位符等。如果元素里有文字、链接、按钮、表单控件，或者它本身是焦点可到达的（如 tabindex="0"），加 aria-hidden="true" 会直接让屏幕阅读器跳过——用户可能完全不知道那里有个可操作项。
常见误用场景：
• 给包含 <svg><use href="#icon-home"></use></svg> 的容器加 aria-hidden="true" —— 正确；但若同一容器里还有“首页”文字，就不能加。
• 给 <div class="loader"></div> 加 aria-hidden="true" —— 没问题；但若这个 loader 是加载失败后显示的“重试按钮”的父容器，那就错了。
aria-hidden="true" 和 display: none 的区别
aria-hidden="true" 只影响辅助技术（如屏幕阅读器）的语义暴露，不影响视觉呈现和 DOM 可访问性；display: none 则会让元素既不可见，也不被辅助技术读取，还从焦点流中移除。
所以：
• 装饰性图标需要保持视觉可见，但不想被读出来 → 用 aria-hidden="true"
• 整个区域要彻底隐藏（包括给键盘焦点、CSS 动画、JS 查询）→ 用 display: none 或 visibility: hidden
• 不要混用：给 display: none 的元素再加 aria-hidden="true" 是冗余的；反过来，仅靠 aria-hidden="true" 并不能隐藏视觉样式
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
嵌套时 aria-hidden 的继承行为
aria-hidden 不继承，但它的效果会向下穿透：父元素设为 aria-hidden="true"，所有后代默认也被隐藏（除非显式设 aria-hidden="false"）。这容易引发意外。
典型陷阱：
• 某个弹窗容器加了 aria-hidden="true"（比如初始隐藏状态），但内部按钮没处理 → 屏幕阅读器完全读不到按钮
• 父元素 aria-hidden="true"，子元素用 aria-hidden="false" 强行暴露 —— 这在部分旧版 NVDA + IE 组合中不可靠，建议避免，改用更明确的 role="presentation" 或重构 DOM 结构
• SVG 中的 <title></title> 或 <desc></desc> 仍可能被读出，即使父 svg 有 aria-hidden="true"，需一并移除或用 aria-hidden="true" 显式标记这些子元素
替代方案：比 aria-hidden 更安全的写法
对纯装饰性图形，优先考虑语义化替代：
• 用 CSS 伪元素（::before/::after）渲染图标 → 完全脱离 DOM，无需 ARIA
• SVG 内联时，直接删掉 <title></title> 和 <desc></desc>，加 role="presentation" 和 focusable="false"（后者防 Safari/Firefox 键盘聚焦 SVG）
• 图标字体（如 Font Awesome）用 <span aria-hidden="true" class="fa fa-home"></span> 包裹，确保文字内容另放、不被隐藏
记住：aria-hidden="true" 是补救手段，不是设计起点。真正健壮的隐藏，靠的是从结构上剥离无关语义，而不是靠属性“盖住”它。
