abbr标签必须带非空title属性才生效，否则语义失效；仅用于用户可能不理解的缩写词，如WCAG，禁用已词汇化或内置处理的词如laser、Mr.。
abbr 标签不是“加个提示框”的快捷方式，它是给机器读的语义信标；不带 title 属性的 abbr 几乎等于没写。
为什么abbr不显示提示？常见失效原因
你写了 <abbr>API</abbr> 却没效果，大概率是漏了 title。浏览器和屏幕阅读器只认这个属性——它不是可选装饰，而是语义生效的硬性条件。
-
title值为空、全是空格或纯标点（如title=" "）→ 语义被忽略 - 在 iOS Safari 或部分 Android 浏览器中，
title悬停提示根本不会触发 - 把
abbr套在非缩写词上（比如<abbr title="JavaScript">JS</abbr>写成<abbr title="JavaScript">JavaScript</abbr>）→ 语义错乱，辅助技术可能跳过 - 用已废弃的
acronym标签 → HTML5 不识别，Lighthouse 会报错，部分读屏软件直接无视
哪些缩写该用abbr？哪些不该碰
判断标准不是“这个词短”，而是“普通用户是否可能不知道它代表什么”。技术文档里尤其要克制：不是所有缩写都值得标记。
- 该用：
DOM、JWT、WCAG、ARIA—— 首次出现时必须带准确title，例如<abbr title="Web Content Accessibility Guidelines">WCAG</abbr> - 慎用：
HTTP、URL、HTML—— 开发者文档中可省略，但面向新手的指南仍建议标注 - 不该用：
Mr.、Dr.、etc.—— 浏览器和主流读屏工具已内置处理逻辑，加abbr反而干扰朗读节奏 - 禁用：
laser、scuba—— 这些词早已词汇化，失去缩写属性，再标就是语义污染
如何让abbr真正起作用，不止靠title
依赖原生 title 提示是脆弱的：移动端不触发、键盘用户 tab 不到、样式不可控。真要确保信息触达，得补一层保障。
立即学习“前端免费学习笔记（深入）”；
- 视觉提示：用
abbr[title]CSS 选择器加虚线下划线 +cursor: help，让用户一眼看出“这词有解释” - 键盘可访问：给
abbr加tabindex="0"，再用aria-describedby关联一个隐藏的<div id="api-desc">Application Programming Interface</div> - 首次出现时，正文里直接展开：写成
API (Application Programming Interface)，再套<abbr title="Application Programming Interface">API</abbr>—— 人机双保险 - 避免嵌套：不要在
abbr里再包abbr、button或a，会破坏焦点流和语义层级
最容易被忽略的一点：你写的 title 值，会被屏幕阅读器一字一顿念出来。所以别写 “Cascading Style Sheets (CSS)” —— 括号和缩写本身重复，听感混乱；就写 “Cascading Style Sheets”。语义清晰，比视觉提示重要得多。
