aria-label必须加在可交互元素上，如<button>、<input type="search">或带role="button"的<div>；不可用于<h2>、<p>等非交互元素，否则会覆盖原内容。
aria-label该加在哪个HTML元素上？
它只对可交互、无可见文本的元素有效，比如 <button>、<input type="search">、自定义 <div role="button">。加在 <h2>、<p> 或纯展示用的 <div> 上不仅没用，还会覆盖原内容——NVDA 和 VoiceOver 会直接跳过你写的标题文字，只读 aria-label 值。
常见错误：
-
<h3 aria-label="用户设置">账户管理</h3>→ 屏幕阅读器不读“账户管理”，只读“用户设置” -
<img src="logo.png" aria-label="公司名">→ 应该用alt="公司名"，aria-label 在<img>上行为不可靠 -
<div><svg></svg></div>单独加 aria-label → 必须先加role="button"和tabindex="0"，否则键盘无法聚焦、读屏器直接忽略
aria-label和aria-labelledby怎么选？
看页面上有没有现成的、可见的、语义匹配的文本。有，就用 aria-labelledby；没有，才用 aria-label。
例如：
立即学习“前端免费学习笔记（深入）”；
- 图标旁已有
<span id="save-text">保存</span>→ 按钮写<button aria-labelledby="save-text"><svg></svg></button> - 弹窗右上角 × 按钮，旁边没文字 → 必须用
<button aria-label="关闭对话框">×</button> - 表格每行的“编辑”按钮，想关联该行姓名 → 写
aria-labelledby="name-42"，不能硬编码aria-label="编辑张三"
两者共存时，aria-label 会完全覆盖 aria-labelledby，Lighthouse 和 axe 都会报错。
值写什么才算真正有用？
不是越长越好，而是要让听的人立刻知道“点它会发生什么”。中文文案必须动词开头、具体、无歧义。
推荐写法：
-
aria-label="删除第5条评论"（带上下文） -
aria-label="展开筛选条件"（明确动作） -
aria-label="下载月度报表"（对象+动作）
避免这些：
-
aria-label="按钮"—— 读屏器已知是按钮，缺的是“做什么” -
aria-label="点击此处"—— 完全无信息量 -
aria-label="Close"—— 多语言站点会失效，翻译系统无法提取 -
aria-label="提交"+<button>发送</button>—— “发送”被静音，视听不一致
SVG图标里怎么配合使用？
纯图标按钮中，<svg> 本身不是交互容器，不能单独加 aria-label。正确做法是：
- aria-label 加在
<button>上 -
<svg>内部加aria-hidden="true"，防止读屏器误读路径描述 - 不要给
<path>或<use>加 aria-label
错误示例：<button><svg aria-label="删除"><path d="..."></svg></button> → 无效，屏幕阅读器仍可能读出 SVG 描述或跳过整个按钮。
容易被忽略的一点：如果按钮里同时有图标和文字，比如 <button><svg></svg> 删除</button>，就不该加 aria-label —— 文字已提供完整语义，加了反而覆盖“删除”二字。
