abbr必须带非空、准确、标准的title属性才具语义作用，否则等同普通span；title仅提供结构化语义，不适用于可控UI提示，且移动端基本无效。
abbr 必须带 title 属性，否则语义失效
不加 title 的 abbr 就是普通 span，悬停无提示、读屏软件不朗读、搜索引擎忽略其缩写含义。HTML 规范明确要求：缩写必须通过 title 提供完整展开形式，否则不算有效语义标注。
常见错误包括：
- 只写
<abbr>HTTP</abbr>，漏掉title - 用
alt、data-tip或 CSS::after伪元素替代title—— 这些都不被辅助技术识别 - 把解释写在标签内容里，比如
<abbr>HTTP (HyperText Transfer Protocol)</abbr>，破坏语义结构且影响样式控制
title 值怎么写才准确又实用
title 不是可有可无的装饰，它是唯一被浏览器和读屏软件信任的来源。它得是纯文本、简洁、准确，不含 HTML、不带冗余描述。
正确示例：
立即学习“前端免费学习笔记（深入）”；
<abbr title="Cascading Style Sheets">CSS</abbr> <abbr title="Application Programming Interface">API</abbr> <abbr title="World Wide Web Consortium">W3C</abbr>
错误倾向：
-
title="The language used to style web pages, called Cascading Style Sheets"—— 太啰嗦，读屏会卡顿 -
title="CSS (Cascading Style Sheets)"—— 混入缩写本体，语义重复 -
title="JavaScript Object Notation (JSON)"—— 中英文混排空格/括号错乱，部分读屏会误读
中文页面和中英混排要注意 lang 和 aria-label
纯中文页面里出现英文缩写（如 URL、API），若不声明语言，NVDA 或 VoiceOver 可能按英文音节逐字读 “U-R-L”，而非 “Uniform Resource Locator”。
解决方案是组合使用：
- 给
abbr加lang="en"，明确语言归属 - 对关键缩写额外加
aria-label，强制读全称，例如：<abbr title="Uniform Resource Locator" lang="en" aria-label="Uniform Resource Locator">URL</abbr> - 避免嵌套
abbr，比如<abbr><abbr>...</abbr></abbr>，多数读屏会丢弃内层title
移动端和 Chrome 的 tooltip 行为不可靠，别依赖视觉提示
桌面 Firefox 悬停能稳定弹出 title 提示；但 iOS Safari 完全不触发，Android Chrome 也基本忽略。Chrome DevTools 里 hover 看不到弹窗，不是你写错了，是 Chrome 主动禁用了该渲染逻辑（出于性能与隐私考虑）。
真正稳定的信号只有两个：
- 用 Lighthouse 运行 Accessibility 审计，检查是否报 “
Element has no title attribute” 或 “Abbreviation has invalid title” - 用 NVDA / VoiceOver 实测朗读结果，看是否读出
title内容 - 别用 CSS 重置
[title] { ... }，某些 normalize.css 版本会删掉position: relative导致 tooltip 渲染异常
复杂点在于：abbr 的价值不在“让人看见提示”，而在于让机器理解上下文——这点很容易被视觉优先的开发忽略。
