aria-label必须用于无可见文本但需屏幕阅读器识别功能的元素，如纯图标按钮；它提供静态替代文本，不可与可见文本共存，且优先级低于aria-labelledby；滥用（如用于img或input）会破坏可访问性。
aria-label 什么时候必须用
当一个元素没有可见文本，但需要被屏幕阅读器读出含义时，aria-label 是最直接的补救方式。比如纯图标按钮（<button><i class="icon-search"></button>）、空链接（<a href="#"></a>），或用 CSS 隐藏了文字只留图标的场景。
它不是“锦上添花”，而是无障碍基础要求：没有它，屏幕阅读器可能读成“button”“link”甚至完全跳过，用户根本不知道这个控件是干啥的。
- 仅用于替代性文本，不改变 DOM 结构或视觉呈现
- 不能和元素内文本共存——如果同时有
aria-label和可见子文本，多数屏幕阅读器会优先读aria-label，导致重复或冲突 - 对已有可访问文本的元素（如带文字的
<button>搜索</button>），加aria-label属于冗余，还可能覆盖原意
aria-label 和 aria-labelledby 的关键区别
aria-label 是“写死一段字符串”，aria-labelledby 是“指向页面里已有的文本节点”。后者更利于维护、支持多语言、避免重复定义。
比如一个模态框标题是 <h2 id="modal-title">用户设置</h2>，关闭按钮就可以写：<button aria-labelledby="modal-title"><i></i></button>，屏幕阅读器会读出“用户设置 按钮”。
-
aria-label：适合简单、静态、无复用需求的场景（如“删除”“展开”） -
aria-labelledby：适合动态内容、需复用现有文案、或要组合多个文本（用空格分隔 ID，如aria-labelledby="label1 label2"） - 两者互斥：同时存在时，
aria-labelledby优先级更高，aria-label被忽略
常见踩坑：哪些情况用了反而坏事
aria-label 不是万能贴纸，滥用会破坏可访问性。
- 给
<img>加aria-label：错误！应优先用alt属性。二者语义不同，alt是图像替代文本，aria-label是元素角色描述，混用可能导致重复朗读或被忽略 - 在
<input type="text">上单独用aria-label：危险！它会绕过<label for>关联，导致输入框失去语义关联，表单验证、焦点管理、语音控制都可能失效。正确做法是显式<label>或至少用aria-labelledby指向已有文本 - 值为空字符串：
aria-label=""会让屏幕阅读器跳过该元素（相当于声明“此处无需朗读”），但若元素实际有功能（如可点击区域），这就等于隐藏了交互入口
调试和验证的小技巧
别只靠肉眼检查是否写了 aria-label，得验证它真被读出来、且读得对。
- 用 Chrome + NVDA（Windows）或 VoiceOver（macOS）手动测试：聚焦元素后听实际播报内容
- 在 DevTools 控制台运行
getComputedAccessibleName(document.querySelector('your-selector'))，看返回值是否符合预期（注意：此 API 非标准，仅 Chromium 支持；更通用的是用 axe 浏览器插件扫描） - 警惕自动翻译工具干扰：如果页面启用浏览器翻译，
aria-label字符串可能被二次翻译，造成语义错乱。敏感文案建议用translate="no"包裹父容器
最常被忽略的一点：aria-label 值必须是简洁、动词导向的自然语言（如“关闭菜单”而非“按钮”），且长度控制在 10–15 字以内——太长会被截断，太模糊会让用户反复确认。
