aria-hidden="true"仅屏蔽屏幕阅读器读取，不影响视觉与交互；适用于纯装饰性元素，禁用于可交互控件；不可与hidden或display:none混用，且具递归性。
aria-hidden 不是用来“隐藏视障元素”的——它不针对视障用户，也不改变视觉呈现，只影响屏幕阅读器等辅助技术对语义树的读取。如果你的目标是让内容对屏幕阅读器不可见但保留视觉显示，aria-hidden="true" 是正确选择；如果想彻底隐藏（视觉+语义+交互），该用 hidden 属性或 display: none。
什么时候该用 aria-hidden="true"
它只适用于纯装饰性、无功能语义的节点：
-
<svg aria-hidden="true"><use href="#icon-close"></use></svg>（旁边已有“关闭”文字） -
<hr aria-hidden="true">（仅作视觉分隔，无结构意义） -
<div class="deco-pattern" aria-hidden="true"></div>（背景花纹容器） - 轮播指示器容器（若已有语音提示或标题）
关键判断标准：移除该元素后，页面的信息完整性、操作流程、含义表达是否不受影响。
哪些地方绝对不能加 aria-hidden="true"
加了会导致键盘用户能聚焦、点击，但屏幕阅读器完全沉默，形成语义断裂：
-
<button aria-hidden="true">提交</button>—— 按钮仍可 Tab 进入、可点击，但读屏不报任何信息 - 任何带
tabindex="0"的<div> 或 <code><a></a> - 模态框遮罩层（
overlay）上误加，导致整个模态内容被静音（因递归生效） - 包含交互子元素的父容器（如按钮外层
<div>）—— 子按钮会被一并跳过 <p>WAI-ARIA 规范明确禁止子元素用 <code>aria-hidden="false"覆盖父级的true，所以嵌套时尤其危险。aria-hidden="true"和hidden、display: none的行为差异三者目的不同，不能混用或替代：
-
hidden属性：元素彻底退出渲染树 + 可访问性树 + 交互能力，DOM 中存在但浏览器忽略；JS 中el.hidden = true才能恢复 -
display: none：仅 CSS 渲染控制，元素仍在 DOM 中、事件仍可绑定、定时器不暂停、getBoundingClientRect()返回空，但辅助技术默认跳过（等效于隐式aria-hidden="true"） -
aria-hidden="true"：仅语义层“静音”，元素照常显示、可点击、可获取尺寸、CSS 生效、JS 可查，只屏蔽读屏
常见错误：给
display: none的元素再加aria-hidden="true"是冗余；只加aria-hidden="true"却没做视觉隐藏，用户看到空白却听不到解释。容易被忽略的递归与焦点管理问题
aria-hidden="true"会递归作用于所有子节点，且无法被子元素的aria-hidden="false"覆盖。动态场景下更需谨慎：- 模态框开启时给
或背景区域加aria-hidden="true"，关闭时必须手动移除，否则读屏状态“卡住” - 若容器加了
aria-hidden="true"，里面按钮仍可获得焦点 → 必须同步加tabindex="-1"或禁用交互 - 不要用它替代
hidden控制表单字段显隐——hidden字段在new FormData(form)中被忽略，而aria-hidden="true"的<input>依然参与提交
真正需要精细语义控制的场景其实很少；多数时候，写对语义化 HTML（比如用
<img alt="">替代空图标）比硬加aria-hidden更可靠。 -
