aria-label必须加在可交互元素（如<button>）上，而非其子元素（如、<svg>）；按钮含SVG时，需在<button>设aria-label并在<svg>加aria-hidden="true"。
aria-label 该加在哪个元素上？
必须加在按钮本身，而不是它的子元素。常见错误是把 aria-label 写在 <span> 或图标标签上，比如 <i class="icon-close" aria-label="关闭"></i> —— 这样屏幕阅读器根本不会读，因为 <i> 不是可交互元素。
正确写法是直接作用于触发操作的元素：
<button aria-label="关闭弹窗"><i class="icon-close"></i></button>
按钮里有 SVG 图标时怎么处理？
SVG 默认没有语义，且内联 SVG 的 <svg> 标签本身不可聚焦、不被朗读。如果按钮只含 SVG，必须同时满足两个条件：一是 aria-label 在 <button> 上，二是给 <svg> 加 aria-hidden="true"，避免重复或干扰。
示例：
立即学习“前端免费学习笔记（深入）”；
<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 d="M18 19a2 2 0 002-2V7a2 2 0 10-4 0v10a2 2 0 002 2z"/>
</svg>
</button>
-
aria-hidden="true"告诉辅助技术忽略这个 SVG - 不要用
title元素替代aria-label—— 它只在鼠标悬停时显示，对键盘和屏幕阅读器无效 - 如果 SVG 是外部文件（
<img src="close.svg">），则必须用alt=""配合按钮上的aria-label
什么时候不该用 aria-label？
当按钮内部已有可见文字时，优先用真实文本，而不是覆盖式加 aria-label。例如：<button>提交</button> 完全不需要 aria-label；强行加上反而可能让屏幕阅读器重复读两次（先读文本，再读 label）。
只有这些情况才需要 aria-label：
- 按钮无任何可见文本（纯图标、纯空白）
- 按钮文本过于简略（如只写“×”、“⋯”），无法表达功能意图
- 按钮文本依赖上下文才能理解（如“编辑”，但页面上有多个“编辑”按钮且目标不明确）
此时应优先考虑改文案（比如“编辑用户信息”），其次才是加 aria-label。
测试是否生效？
不能只靠眼睛看 HTML 是否写了 aria-label。实际验证要走两步：
- 用键盘 Tab 切入按钮，听屏幕阅读器（NVDA / VoiceOver）是否准确朗读内容
- 用浏览器开发者工具检查元素的
Accessibility面板，确认name字段显示的是你设的值，而非 “null” 或 “button” - 禁用 CSS 后查看按钮是否仍可识别 —— 如果按钮消失但
aria-label还在，说明它真正承担了语义职责
容易忽略的一点：某些旧版 JAWS 或 Android TalkBack 对空按钮的处理不稳定，如果发现朗读异常，检查是否意外嵌套了 <div> 或用了 role="button" 代替原生 <button> —— 原生按钮语义最可靠。
