aria-hidden="true" 的作用边界仅限于向辅助技术隐藏元素及其子节点的语义信息，不影响视觉呈现、css渲染、javascript事件或dom结构。
aria-hidden="true" 的作用边界是什么
aria-hidden="true 不会移除 DOM 节点，也不影响 CSS 渲染或 JavaScript 事件绑定，它只告诉辅助技术（如屏幕阅读器）“忽略这个元素及其所有子节点的语义信息”。常见误解是以为它能隐藏视觉内容或替代 display: none —— 实际上，一个 aria-hidden="true" 的 div 依然可见、可点击、可聚焦（除非额外加 tabindex="-1" 或禁用交互）。
哪些元素适合加 aria-hidden="true"
典型装饰性元素包括：纯图标（无文本说明的 svg 或 i）、分隔线 hr（当仅作视觉分割）、背景花纹 div、加载动画中的占位图形、重复的装饰性箭头/圆点等。关键判断标准是：移除它后，页面的信息完整性、操作流程、含义表达是否不受影响。
- ✅ 适用：
<svg aria-hidden="true"><use href="#icon-star"></use></svg> - ❌ 不适用：
<svg aria-hidden="true"><text>提交</text></svg>（文字有功能意义） - ⚠️ 风险：
<span aria-hidden="true">•</span> 标题内容—— 若该符号被用于视觉层级提示，部分屏幕阅读器可能跳过导致结构感知断裂
与 display: none 和 visibility: hidden 的区别
display: none 和 visibility: hidden 会让元素既不可见也不被辅助技术读取（相当于隐式 aria-hidden="true"），但它们同时切断了所有 JS 交互和布局参与。而 aria-hidden="true" 是语义层的“静音开关”，保留视觉与行为能力。例如：
<button> <svg aria-hidden="true" focusable="false">...</svg><span>删除</span> </button>
这里 aria-hidden="true" 确保图标不被读出，focusable="false" 防止 SVG 自身意外获得焦点（某些浏览器中 SVG 默认可聚焦）。
容易被忽略的嵌套陷阱
如果父元素设了 aria-hidden="true"，所有子元素（包括按钮、链接、表单控件）都会被辅助技术跳过，无论它们自己有没有 aria-hidden="false" —— WAI-ARIA 规范明确禁止子元素用 false 覆盖父级的 true。所以：
- 不要给包含交互控件的容器加
aria-hidden="true" - 避免在模态框遮罩层（
overlay）上误加该属性，否则整个模态内容区可能被静音 - 动态显示/隐藏区域时，优先用
display: none或hidden属性，而非切换aria-hidden—— 后者无法保证焦点管理同步
真正需要精细控制语义暴露的场景其实不多；多数时候，用对 HTML 语义标签（比如用 img 带 alt="" 表示装饰图）比硬塞 aria-hidden 更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
