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

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

哪些元素必须配 aria-label？

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

• 里只有 或图标字体（如 ）→ 必须加 aria-label="删除项目"
• 自定义伪按钮：
  → 不加 aria-label 就等于没名字，读屏器只报“按钮”
• 没配 ，且上下文无法推断用途（比如页脚独立搜索框）→ 可用 aria-label="站内搜索"
• 加载状态容器：

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

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

Wechat Article Html

将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。

下载

• 用户设置

  上加 aria-label="设置页面" → 屏幕阅读器跳过“用户设置”，只读“设置页面”
• → 应该用 alt="公司名"，aria-label 在 上行为不可靠
• 提交 硬加 aria-label="发送" → “提交”被静音，视听不一致
• 已有 邮箱地址 → 再加 aria-label 会绕过 ，表单语义断裂

aria-label 和 aria-labelledby 怎么选？

核心就一条：页面上有没有现成的、可见的、语义匹配的文本？

• 有 → 用 aria-labelledby="id"，比如模态框标题

  编辑订单

  ，关闭按钮写
• 没有 → 才用 aria-label，比如右上角 × 按钮、表格行里的“操作”图标
• 两者共存 → aria-labelledby 优先，aria-label 被忽略，写了也白写
• 不要给 本身加 aria-label，它不是交互容器；正确做法是加在 上，并给 加 aria-hidden="true"

容易被忽略的细节

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

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

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