abbr 标签必须带非空 title 属性才具备语义，否则等同于普通文本；title 值须为准确全称、避免冗余，并配合上下文首次定义，核心价值在于被正确识别为缩写而非提示显示。
abbr 标签必须带 title 属性才真正起作用，不加等于没写；空字符串、空格或缺失都会导致语义丢失、屏幕阅读器跳过、鼠标悬停无提示。
为什么加了 title 还没反应？
常见错误不是语法错，而是行为预期偏差：
- 桌面 Chrome/Firefox 会延迟显示原生 tooltip，但 Safari（尤其 iOS）基本不触发
title提示 - 移动端用户点不开、键盘用户
Tab不到、部分读屏软件忽略或误读title值 -
title是全局属性，不是abbr特有，它只提供辅助信息，不保证渲染或交互 - 写了
<abbr>HTTP</abbr>却没加title，和普通文本完全一样
title 值怎么写才合规？
不是“随便填个解释”，而是要满足可访问性与语义一致性要求：
- 必须是完整、标准、大小写准确的全称，比如
title="Cascading Style Sheets"，不能写成title="css"或title="style sheets" - 避免冗余，不要重复缩写本身，如
title="API: Application Programming Interface"❌；应写成title="Application Programming Interface"✅ - 机构名优先采用官网命名，如
WHO→title="World Health Organization"；技术术语查 MDN，如DOM→title="Document Object Model" - 中文页面建议给
abbr加lang属性，例如<abbr title="Application Programming Interface" lang="en">API</abbr>，帮助语音合成器正确发音
首次出现缩写时怎么组织上下文？
光靠 abbr 不够，WCAG 和实际可读性都要求上下文支撑：
- 推荐写法：先出现全称 + 括号内缩写，再用
abbr，例如Application Programming Interface (API)，后续再单独用<abbr title="Application Programming Interface">API</abbr> - 避免在同一个段落里多次重复解释，首次定义后，后续直接使用即可
- 别把
abbr嵌套在<a></a>或<button></button>里——会干扰焦点逻辑和读屏顺序 - 不要用
acronym：HTML5 已废弃，所有缩写（包括 NASA、RSS、JSON）统一用abbr
想稳定实现悬浮提示怎么办？
原生 title 不可靠，真要跨设备一致提示，得放弃依赖它：
- 视觉层用 CSS 实现：加
class="abbr-tooltip"，配合::after和data-title属性模拟提示框，不污染语义 - 可访问层用
aria-describedby关联隐藏的解释段落，并设tabindex="0"支持键盘聚焦 - 绝对不要同时写
title和aria-label——后者会覆盖abbr的语义，导致读屏器只读aria-label，跳过缩写本身 - 如果项目已用 JS 组件库（如 Tippy.js），优先用其封装
abbr，而非硬塞title
真正容易被忽略的是：abbr 的价值不在“有没有提示”，而在“有没有被正确识别为缩写”。哪怕用户看不见 tooltip，只要 title 准确、上下文清晰、不滥用，就完成了它的核心使命。
