必须用 aria-label 而非 title 的情况是元素无可见文本（如纯图标按钮、空 button、仅背景图 div）且需屏幕阅读器正确识别时；此时 aria-label 提供唯一可靠可访问名称，title 在触屏不可用、多屏幕阅读器默认忽略，且与 aria-label 共存时被完全覆盖。
aria-label 直接替换元素的可访问名称，title 仅在悬停/聚焦时作为辅助提示，且不被所有屏幕阅读器可靠读出——别用 title 替代 aria-label 做可访问性兜底。
什么时候必须用 aria-label 而不是 title
当元素本身没有可见文本（比如纯图标按钮、空 <button></button>、仅靠背景图的 <div>），又需要被屏幕阅读器正确识别时，aria-label 是唯一靠谱的选择。
-
title在触屏设备上几乎不可触发，移动端用户完全感知不到 - 很多屏幕阅读器（如 NVDA + Firefox）默认忽略
title，除非用户手动开启“读取工具提示”选项 -
aria-label会彻底覆盖元素的原有可访问名称（包括子文本、alt等），适合“无文本但需明确定义用途”的场景
aria-label 和 title 同时存在会发生什么
两者共存时，aria-label 优先级远高于 title，后者会被完全忽略——这不是叠加效果，而是覆盖关系。
- 写成
<button title="删除" aria-label="永久移除该条目"></button>，屏幕阅读器只读“永久移除该条目” -
title此时只剩鼠标悬停时的浏览器原生提示作用，对可访问性零贡献 - 如果想兼顾视觉提示和可访问性，应优先确保可见文本清晰，再按需补
aria-label（例如图标按钮旁加隐藏文本更优）
比 aria-label 更推荐的替代方案
硬加 aria-label 是下策。真正健壮的可访问性，优先靠语义化 HTML 和视觉隐藏文本实现。
立即学习“前端免费学习笔记（深入）”；
- 用
<button>删除</button>而不是<div role="button" aria-label="删除"></div> - 图标按钮配
<span class="visually-hidden">搜索</span>（配合 CSSposition: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;），比纯aria-label更稳定 -
aria-labelledby指向页面中已存在的可见文本 ID，比重复写字符串更易维护、支持翻译
最常被忽略的一点：aria-label 的值必须是简洁、动词开头的明确指令（如“打开菜单”，而非“菜单按钮”）；而 title 写得再准确，也救不了它在可访问性链路里的先天残缺。
