aria-label必须加在可交互元素（如、、带role="button"的）上，仅当元素无可见文本时才有效；加错位置或覆盖已有文本会致屏幕阅读器读错或跳过功能。

必须加在可交互元素上，且仅当它真没可见文本时才有效；加错位置或覆盖已有文本，反而会让屏幕阅读器读错甚至跳过功能。

aria-label该加在哪个元素上？

只加在、、、带role="button"的

这类可聚焦/可交互的容器上，不能写在子元素（如）里。

• <button aria-label="关闭"><svg aria-hidden="true"></svg></button> ✅ 正确：按钮本身有语义名，
• <button><svg aria-label="关闭"></svg></button> ❌ 无效：
• <div aria-label="菜单"></div> ❌ 无效：默认不可聚焦，读屏器跳过；若真要用，得补role="button"和tabindex="0"，但这暴露设计问题

哪些情况加了反而破坏无障碍？

aria-label会完全覆盖元素内所有文本，包括子节点内容。常见误用直接让控件对视障用户“消失”。

HTML Extract

使用 MinerU 从 HTML 页面和文件中提取内容，将 HTML 转换为保持标题、列表、表格及文本层次结构的干净、结构化 Markdown。F...

下载

• 给<img>加aria-label：错误！必须用alt，二者语义冲突，可能重复朗读或跳过图像
• 给已有<label for="email">邮箱地址</label>的<input id="email">再加aria-label：Lighthouse报错，语义被绕过，语音控制失效
• aria-label=""（空字符串）：等于告诉读屏器“这个按钮不用读”，但它是可点击的——相当于把交互入口封死

aria-label和aria-labelledby怎么选？

核心就看页面上有没有现成的、可见的、可访问的文本。

• 没有现成文本 → 用aria-label，比如<button>×</button>配aria-label="关闭"
• 有现成文本（如<h2 id="chart-title">月度销售额</h2>）→ 用aria-labelledby="chart-title"，文案改了、翻译切了，读屏内容自动同步
• 两者共存 → aria-labelledby优先级更高，aria-label被忽略，白写

最常出问题的不是没加，而是ID拼错、目标元素被display: none或aria-hidden="true"隐藏，导致引用失败——控件对读屏器彻底失联。

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