aria-hidden="true" 应用于纯视觉装饰、不传递信息且无需屏幕阅读器播报的图标，如按钮内分隔用SVG、表单旁装饰性箭头、无意义icon字体字符、加载动画等；它仅隐藏语义层，不影响布局与交互，比display:none更精准，且优于role="presentation"。
aria-hidden="true" 什么时候该用
当图标纯属视觉装饰、不传递信息、也不需要被屏幕阅读器读出时，aria-hidden="true" 是最直接有效的排除方式。它告诉辅助技术“忽略这个元素”，比单纯用 display: none 或 visibility: hidden 更精准——后者会同时影响布局和可访问性，而 aria-hidden="true" 只影响语义层。
哪些图标必须加 aria-hidden="true"
以下情况不加就可能造成屏幕阅读器误读或冗余播报：
- 按钮里仅作视觉分隔的
<svg>小圆点（如<button><svg aria-hidden="true">...</svg>提交</button>） - 表单旁纯粹装饰性的箭头、星号、分割线图标
- 卡片标题前的无意义 icon font 字符（如
<span class="icon-star">★</span>但没配role="img"或aria-label） - 加载动画中的
<div class="spinner"><svg aria-hidden="true">...</svg></div>
aria-hidden="true" 和 role="presentation" 的区别
两者效果相似，但语义不同：aria-hidden="true" 是明确“对辅助技术隐藏”，而 role="presentation" 是声明“此元素无语义角色”。实际项目中优先选 aria-hidden="true"，因为：
- 它更直白，意图明确
- 部分旧版 NVDA 或 JAWS 对
role="presentation"处理不一致 - 如果元素本身有交互（比如点击触发 JS），
aria-hidden="true"不会禁用事件，而role="presentation"可能干扰焦点逻辑 -
aria-hidden="true"可以安全用于<svg>、<span>、<i>等任意容器，无需担心角色冲突
容易漏掉的坑
加了 aria-hidden="true" 并不等于万事大吉：
立即学习“前端免费学习笔记（深入）”；
- 别给它配
tabindex="0"—— 隐藏了语义却保留了键盘焦点，会导致焦点卡住且不可见 - 如果图标是链接或按钮的一部分（如
<a href="#"><svg aria-hidden="true"></svg>首页</a>），确保文字内容本身已足够传达目的，否则要补aria-label在外层 - 动态插入的图标（如 Vue/React 渲染后注入），得在 JS 中同步设置
aria-hidden="true"，不能只靠初始 HTML - 不要对整个图标字体图标集批量加
aria-hidden="true"，除非确认每个字符都无语义；否则可能误藏关键状态标识（如“错误”红叹号）
真正难的不是加这行属性，而是判断哪个图标该加、哪个不该加——得站在屏幕阅读器用户角度，逐个问：这个图形删掉，操作流程和信息理解会不会受损？
