aria-label 必须加在 button 等可聚焦交互元素上，而非 svg 或 i；svg 应加 aria-hidden="true" 避免误读；仅当按钮无可见文本时才需 aria-label，有可见文本时添加反而覆盖原标签。
aria-label 必须加在 button 上，而不是 svg 或 i
常见错误是把 aria-label 写在图标内部，比如 <i class="icon-close" aria-label="关闭"></i> 或 <svg aria-label="删除"></svg>。这些写法无效——屏幕阅读器只读可聚焦、有交互语义的元素，i 和 svg 默认不是控件，标签被完全忽略。
正确做法是直接加在触发操作的容器上：
<button aria-label="删除项目"> <svg aria-hidden="true" width="16" height="16"><path d="M6 19a2 2 0 002-2V7a2 2 0 10-4 0v10a2 2 0 002 2z"></path></svg></button>
-
aria-label在button上，确保语义可读 -
svg加aria-hidden="true"，防止某些读屏器误读路径数据 - 不要给
svg加title或desc，它们不保证被朗读，且可能干扰
哪些情况必须加 aria-label，哪些情况不该加
加不是为了“看起来更规范”，而是补足缺失的语义。只有当按钮没有可读的可见文本时才需要：
- 纯图标：
<button><svg></svg></button> - CSS 隐藏文字：
text-indent: -9999px或visibility: hidden后只剩图标 - 仅含 Emoji：
<button>?</button>（Emoji 不被读屏器识别为功能文本） - 动态生成的伪按钮：
<div role="button" tabindex="0"></div>
以下情况加了反而有害：
-
<button>提交</button>再加aria-label="确认"→ 屏幕阅读器只读“确认”，跳过“提交” -
<input id="email">已有<label for="email">邮箱地址</label>，再加aria-label→ 绕过 label，Lighthouse 报错，焦点管理失效 -
<img src="close.svg" aria-label="关闭">→ 错误！必须用alt="关闭"，aria-label和alt语义冲突
测试是否真正生效，不能只看 HTML 是否写了
写了 aria-label 不等于它被读出来。验证要走实际路径：
- 用键盘按
Tab切入按钮，听 NVDA / VoiceOver 是否准确朗读你设的值（不是“按钮”或“未命名”） - 打开浏览器开发者工具 → Accessibility 面板 → 查看该按钮的
Name字段，必须显示为你写的字符串，不能是null或空 - 禁用 CSS 后刷新页面：如果按钮视觉消失但
aria-label仍能被读出，说明它真正承担了语义职责；如果按钮彻底不可见也不可聚焦，说明缺少role或tabindex等基础可访问性支撑
最容易漏掉的是 svg 没加 aria-hidden="true"，导致读屏器一边读 aria-label，一边又试图解析 SVG 路径，造成重复或混乱播报。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
