aria-label是必须加在无可见文本但需被读出功能的可交互元素上的属性，如纯图标按钮、伪按钮、无label搜索框等；加错位置（如img、已有label的input、标题等）会覆盖内容或触发报错，且不能与aria-labelledby共存。
aria-label 不是标签，是属性；它不能单独存在，必须加在可交互元素上才有意义。加错位置、加在不该加的地方，反而会让屏幕阅读器跳过真实内容，或者完全读不出来。
哪些元素必须配 aria-label？
只在元素**没有可见文本、又必须被读出功能**时才需要它：
-
<button>里只有<svg>或图标字体（如<i class="icon-delete"></i>）→ 必须加aria-label="删除项目" - 自定义伪按钮：
<div role="button" tabindex="0"></div>→ 不加aria-label就等于没名字，读屏器只报“按钮” -
<input type="search">没配<label>，且上下文无法推断用途（比如页脚独立搜索框）→ 可用aria-label="站内搜索" - 加载状态容器：
<div role="status" aria-label="正在提交表单..."></div>
哪些地方绝对不能配 aria-label？
加了不仅无效，还会覆盖原内容或触发 Lighthouse 报错：
-
<h2>用户设置</h2>上加aria-label="设置页面"→ 屏幕阅读器跳过“用户设置”，只读“设置页面” -
<img src="logo.png" aria-label="公司名">→ 应该用alt="公司名"，aria-label在<img>上行为不可靠 -
<button>提交</button>硬加aria-label="发送"→ “提交”被静音，视听不一致 -
<input id="email">已有<label for="email">邮箱地址</label>→ 再加aria-label会绕过<label>，表单语义断裂
aria-label 和 aria-labelledby 怎么选？
核心就一条：页面上有没有现成的、可见的、语义匹配的文本？
立即学习“前端免费学习笔记（深入）”；
- 有 → 用
aria-labelledby="id"，比如模态框标题<h2 id="modal-title">编辑订单</h2>，关闭按钮写<button aria-labelledby="modal-title"></button> - 没有 → 才用
aria-label，比如右上角 × 按钮、表格行里的“操作”图标 - 两者共存 →
aria-labelledby优先，aria-label被忽略，写了也白写 - 不要给
<svg>本身加aria-label，它不是交互容器；正确做法是加在<button>上，并给<svg>加aria-hidden="true"
容易被忽略的细节
真正出问题的，往往不是没加，而是加得“太随意”：
-
aria-label=""相当于告诉读屏器“这个按钮不用读”，但它是可点击的——等于主动封死视障用户的操作入口 - 值写成
aria-label="按钮"或aria-label="点击这里"→ 完全无信息量，读屏器已知它是按钮，缺的是“做什么” - 多语言站点写死英文：
aria-label="Close"→ 翻译系统无法提取，本地化失效 - 调试时别只看 HTML 里有没有写，要用 Chrome DevTools 的 Accessibility 面板检查「Name Computation」是否生效
