abbr 有效语义标记必须带非空 title，且值为简洁准确的全称；首次出现缩写须在正文中自然写出“全称 (缩写)”并包裹 abbr；title 不是 ui 提示而是语义信号，移动端基本不触发悬停，应优先确保首现即懂。
abbr 必须带非空 title 才算有效语义标记
没写 title 的 abbr 和 span 没区别——Lighthouse 会报 “abbr missing description”，屏幕阅读器跳过，鼠标悬停也不提示。浏览器只认 title 属性值，不是标签本身。
常见失效写法：
-
title=""或title=" "（纯空格）会被完全忽略 -
title="API (Application Programming Interface)"含括号和缩写重复，语义混乱 -
title="JavaScript Object Notation (JSON)"混入解释性文字，不符合规范
正确写法只有一个标准：title 值必须是简洁、准确、纯文本的全称，大小写与官方一致：title="Cascading Style Sheets"、title="World Health Organization"。
首次出现缩写必须在正文中自然写出全称 + 缩写
仅靠 abbr[title] 无法满足 WCAG 可访问性要求。读者可能不熟悉的缩写，首次出现时必须“一眼看懂”，不能依赖悬停或聚焦才暴露含义。
正确结构示例：
<p>Application Programming Interface (API) enables communication between software systems.</p>
其中 API 应包裹在 abbr 中，即：
<p>Application Programming Interface (<abbr title="Application Programming Interface">API</abbr>) enables communication...</p>
注意：abbr 不负责定义术语，只负责提供全称；定义职责归 dfn 标签。
abbr 嵌套在链接或中文页面中容易出问题
当 abbr 放在 a 标签内时，a 的 title 会覆盖 abbr 的 title，导致读屏软件只读链接描述，忽略缩写全称。
解决方案：
- 把
abbr放在a内部，并显式保留其title（a的title可留空或删掉） - 中英文混排时加
lang="en"，避免 VoiceOver 把URL读成 “U-R-L” - 禁止嵌套
abbr，例如<abbr title="HTML"><abbr title="HyperText Markup Language">HTML</abbr></abbr>，内层title会被忽略
移动端和新版 Chrome 已基本不触发 title 提示
abbr 的 title 不是 UI 组件，而是语义信号。它在桌面 Firefox 悬停时稳定弹出，但在 iOS Safari 完全不触发，Android Chrome 在 WebView/PWA 中也基本忽略。Chrome 和 Edge 自 2025 年起默认禁用 title 悬停渲染。
真正起作用的从来不是“悬停时看见”，而是“所有用户第一眼就读懂”。如果目标用户含大量移动设备使用者，建议：
- 首次出现时坚持用 “全称 (缩写)” 句式，不省略括号内容
- 放弃依赖
title实现跨设备提示，改用data-full+ JS 或 CSS::after实现可控提示 - 不要给
abbr加aria-label，这会覆盖title，违背语义初衷
容易被忽略的是：缩写词首次出现的位置和上下文，比标签本身更重要。同一页面多次出现相同缩写时，只在第一次用 abbr+title 即可，后续直接写缩写——过度使用反而干扰阅读节奏。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
