aria-label 必须加在 button 等可聚焦交互元素上，而非 svg 或 i；svg 应加 aria-hidden="true" 避免误读；仅当按钮无可见文本时才需 aria-label，有可见文本时添加反而覆盖原标签。
aria-label 必须加在 button 上，而不是 svg 或 i
常见错误是把 aria-label 写在图标内部，比如 或 。这些写法无效——屏幕阅读器只读可聚焦、有交互语义的元素，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，哪些情况不该加
加不是为了“看起来更规范”，而是补足缺失的语义。只有当按钮没有可读的可见文本时才需要：
- 纯图标：
- CSS 隐藏文字：
text-indent: -9999px或visibility: hidden后只剩图标 - 仅含 Emoji：
（Emoji 不被读屏器识别为功能文本） - 动态生成的伪按钮：
以下情况加了反而有害：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
-
再加aria-label="确认"→ 屏幕阅读器只读“确认”，跳过“提交” -
已有，再加aria-label→ 绕过 label，Lighthouse 报错，焦点管理失效 -
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实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
