title属性仅是浏览器悬停提示，对屏幕阅读器等无障碍用户无效；应优先用明确链接文本，其次aria-label（会覆盖title），title仅作视觉辅助。
title属性在标签里根本不是无障碍说明
它只是浏览器原生的悬停提示，对屏幕阅读器、触屏用户、键盘焦点用户基本无效。很多人误以为写了title就算做了无障碍补充，结果是：鼠标用户能看到，其他用户全漏掉。
常见错误现象包括：
- 链接文字简短（如“详情”），靠
title="查看订单ID为12345的完整物流信息"补全语义——但视障用户根本听不到 - 移动端点击后无任何反馈，用户不知道点的是什么
- NVDA + Firefox 默认不读
title，除非用户手动开启“读取工具提示”选项
真正该做的，是让链接本身带明确动词+宾语：<a href="https://www.php.cn/link/d1c26616c4c89a5e0ef04274e63c7849">查看订单 #12345 的物流详情</a>。如果视觉上不能展开写，就用aria-label替代——但注意：aria-label会完全覆盖链接文本，必须和可见内容语义一致。
title和aria-label同时写在上会发生什么？
两者共存时，aria-label优先级远高于title，后者只剩悬停时显示，对可访问性零贡献。这不是叠加，是覆盖。
例如：<a href="/pdf" title="下载PDF格式报告" aria-label="下载2026年Q2营收分析报告">下载</a>
屏幕阅读器只读“下载2026年Q2营收分析报告”，title里的内容被彻底忽略。如果aria-label写得不准（比如漏了年份或类型），反而造成信息丢失。
使用场景判断要点：
- 链接有清晰可见文本 → 不加
aria-label，也别指望title兜底 - 链接是纯图标（如
@#@#@#@#@#@#@#@#@#@2）→ 必须用aria-label，title可留作悬停补充，但不可信 - 需要额外技术信息（如文件大小、格式）→
title可以写，但只能作为视觉辅助，不能承载关键语义
为什么alt和title在![]()
里能共存，但在里不行？
因为alt是强制可访问性属性，参与文本替代计算；而title在<a></a>中既不参与计算，也不被AT可靠读取。W3C标准中，<a></a>的可访问名称来源只有：内部文本、aria-label、aria-labelledby——title不在其中。
参数差异直接决定行为：
-
alt：图像专属，失败时替代渲染，必填（空值alt=""合法） -
title：通用属性，仅hover触发，无强制语义，不参与可访问名称生成 -
aria-label：直接定义可访问名称，覆盖一切内部文本和title
性能影响不大，但兼容性风险真实存在：Safari 对title支持极弱，Android Chrome 基本不显示，iOS VoiceOver 默认跳过。
代码质量检查中最常被忽略的一点
CI流水线里跑axe或nu html checker，不会报title缺失，但会警告aria-label滥用——比如给已有文本的<a>导出数据</a>硬加aria-label="导出CSV格式数据"。这种写法看似“更详细”，实则破坏原生语义，还可能触发重复播报。
真正健壮的做法是：优先扩展可见文本，其次用aria-labelledby关联附近描述性文字，最后才考虑aria-label。而title，只当它是给鼠标用户的小纸条，别让它承担不该担的责任。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
