aria-label是必须加在无可见文本但需被读出功能的可交互元素上的属性，如纯图标按钮、伪按钮、无label搜索框等；加错位置（如img、已有label的input、标题等）会覆盖内容或触发报错，且不能与aria-labelledby共存。

aria-label 不是标签，是属性；它不能单独存在，必须加在可交互元素上才有意义。加错位置、加在不该加的地方，反而会让屏幕阅读器跳过真实内容，或者完全读不出来。

哪些元素必须配 aria-label？

只在元素**没有可见文本、又必须被读出功能**时才需要它：

• <button></button> 里只有 <svg></svg> 或图标字体（如 <i class="icon-delete"></i>）→ 必须加 aria-label="删除项目"
• 自定义伪按钮：<div role="button" tabindex="0"></div> → 不加 aria-label 就等于没名字，读屏器只报“按钮”
• <input type="search"> 没配 <label></label>，且上下文无法推断用途（比如页脚独立搜索框）→ 可用 aria-label="站内搜索"
• 加载状态容器：<div role="status" aria-label="正在提交表单..."></div>

哪些地方绝对不能配 aria-label？

加了不仅无效，还会覆盖原内容或触发 Lighthouse 报错：

html-deploy

使用 htmlcode.fun 将 HTML 内容或文件部署到网页，适用于用户要求“部署到网页”“托管此 HTML”“生成此前端...的实时链接”等场景。

下载

• <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></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></svg> 本身加 aria-label，它不是交互容器；正确做法是加在 <button></button> 上，并给 <svg></svg> 加 aria-hidden="true"

容易被忽略的细节

真正出问题的，往往不是没加，而是加得“太随意”：

• aria-label="" 相当于告诉读屏器“这个按钮不用读”，但它是可点击的——等于主动封死视障用户的操作入口
• 值写成 aria-label="按钮" 或 aria-label="点击这里" → 完全无信息量，读屏器已知它是按钮，缺的是“做什么”
• 多语言站点写死英文：aria-label="Close" → 翻译系统无法提取，本地化失效
• 调试时别只看 HTML 里有没有写，要用 Chrome DevTools 的 Accessibility 面板检查「Name Computation」是否生效

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！