在前端开发中，aria-hidden 是一个用于控制无障碍树子树可见性的属性。它能够帮助开发者在视觉呈现和可访问性之间取得平衡，避免将冗余信息暴露给屏幕阅读器的用户。
理解 aria-hidden 的语义与影响范围，是实现一致无障碍体验的关键。它主要影响辅助技术的可读性，而不一定直接改变页面的视觉效果，因此需要与布局和焦点管理协同设计。
aria-hidden 的基本概念与正确语义
定义与作用
aria-hidden 是一个布尔属性，用来告知屏幕阅读器应否将目标元素及其子树加入无障碍树。属性值为 true 时，相关内容对辅助技术不可见；属性值为 false 时，内容重新进入可访问性树。
这意味着 aria-hidden 只影响无障碍树，不一定改变页面的视觉呈现。开发者需要结合页面结构与键盘焦点管理来实现一致的可访问性体验。
<div aria-hidden="true">仅用于屏幕阅读器隐藏的内容</div>与无障碍树的关系
当父级或宿主元素被设为 aria-hidden="true" 时，子树会被无障碍技术从可访问性树中移除，确保用户不会看到冗余信息。
如果你只想隐藏视觉上不需要的部分，不要错用 aria-hidden 来控制焦点，这样可能导致可聚焦元素在键盘导航中的可访问性被破坏。
aria-hidden 的正确使用场景
装饰性元素的隐藏与文本可访问性
对于仅用于美观的图标、分隔线等 不传达信息的元素，应使用 aria-hidden 以避免干扰屏幕阅读器的读取顺序，同时确保文本信息仍对用户可用。
需要注意的是，任何提供信息的内容（如按钮标签、提示文本）都不应被无意隐藏，否则会造成可访问性问题。
<svg width="16" height="16" aria-hidden="true" focusable="false">... 图标内容 ...
</svg>模态对话与背景内容的处理
在打开模态对话框时，常见的做法是将背景内容标记为 aria-hidden="true"，以避免屏幕阅读器遍历背景元素。
但要确保对子树的可访问性没有被错误地覆盖，且对话框内的可交互元素保持可访问。此时焦点管理与屏幕阅读器的行为要保持一致。
<div id="backdrop" aria-hidden="true" style="pointer-events:none">背景内容</div>
<div id="modal" role="dialog" aria-modal="true" aria-label="设置对话框">对话框内容</div>常见误区与错误做法
误区一：将 aria-hidden 锁定在所有交互元素上
把 aria-hidden="true" 应用到按钮、链接等可交互元素，会导致这些控件对屏幕阅读器不可用，并且可能打乱键盘导航的逻辑。
如果需要隐藏某些交互控件以简化界面，应考虑使用 tabindex="-1"，或从文档流中移除该元素，而非简单开启 aria-hidden。
误区二：将 aria-hidden 作为 CSS display 的替代品
aria-hidden 并非用于控制视觉呈现，而是控制无障碍树的可见性。使用 aria-hidden 代替 display:none 会导致屏幕阅读器与视觉呈现不一致，造成信息错位。
对于需要从视觉上隐藏的内容，应同时考虑视觉样式和可访问性状态，例如配合 display: none、或者将元素从文档流中移除。
误区三：动态内容更新时没有同步 aria-hidden 状态
动态加载/卸载内容时，若 aria-hidden 的状态没有同步更新，屏幕阅读器可能读到过时信息。
在涉及的组件中，更新 DOM 时应一并调整 aria-hidden、aria-label/aria-labelledby 的状态，以保持一致性。
与其他无障碍属性的协作
和 aria-label、aria-labelledby 的搭配
在需要为元素提供可访问性文本时，不要因为隐藏而让文本无效，可通过 aria-label/aria-labelledby 提供替代文本，但若元素被 aria-hidden，相关文本将变得不可用。
正确的做法是在需要读出内容时保留文本可访问性，同时仅对不需要的部分使用 aria-hidden，以维护信息的准确性。
与 role 与 aria-modal 的组合使用
将对话框或弹窗设为 role="dialog" 或 aria-modal="true" 能帮助屏幕阅读器理解组件的层级与焦点范围。此时不要让容器中的核心信息被 aria-hidden 覆盖。
在复杂组件中，应明确标记哪些子树应被隐藏，哪些应保留对辅助技术的可访问性，以避免混淆。
<div class="dialog-backdrop" aria-hidden="true"></div>
<div class="dialog" role="dialog" aria-modal="true" aria-label="设置对话框">...</div>