abbr 的 title 属性必须为非空纯文本全称，且首次出现缩写需在正文中写出全称加括号缩写，否则语义失效；title 含 HTML、括号、冗余词或为空均无效，移动端及新版浏览器已基本不支持 title 提示。
abbr 的 title 属性必须非空且纯文本全称
写了 abbr 却没提示？大概率是 title 值为空、含 HTML、带括号或冗余词。浏览器和屏幕阅读器只认纯文本全称，其他都当无效处理。
-
title="Cascading Style Sheets"✅ 标准、完整、无标点 -
title="CSS"❌ 缩写本身不是全称 -
title="API (Application Programming Interface)"❌ 括号和缩写重复 -
title=""或title=" "❌ 等同于没写abbr -
title="<em>JavaScript</em>"❌ HTML 标签会被原样显示，不解析
首次出现缩写必须在正文中写出全称 + 括号缩写
光靠 abbr + title 不够——WCAG 明确要求首次出现时，用户得“一眼看懂”。否则认知障碍、非母语、移动端用户全被绕过。
- 正确写法：
<p>Application Programming Interface (API) enables communication...</p> - 后续再用
<abbr title="Application Programming Interface">API</abbr>即可 - 别把全称塞进
title里再指望用户悬停才看到——那等于没说 - 机构名优先查官网，如
WHO→title="World Health Organization"
title 提示在桌面端已不可靠，移动端基本失效
Chrome 和 Edge 自 2025 年起默认禁用 title 悬停渲染；Safari macOS 截断超 60 字符；iOS Safari 和 Android Chrome 在 WebView/PWA 中几乎不触发。它不是 UI 组件，只是语义信号。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
- 键盘用户 Tab 不到
abbr，title内容不可聚焦 - 高对比度模式下系统 tooltip 常被隐藏
- 无法用 CSS 控制样式、延迟、箭头或换行——
pointer-events: none无效 - 想跨设备稳定提示？必须放弃
title，改用data-full+ JS 或 CSS::after实现
缩写嵌套、链接内使用、lang 属性这些细节容易翻车
看似简单，但一错就丢语义。尤其当 abbr 套在链接里，或页面是中文时，读屏和 SEO 都会出问题。
立即学习“前端免费学习笔记（深入）”；
-
<a href="#" title="Home"><abbr title="Application Programming Interface">API</abbr></a>❌ 链接的title会覆盖abbr的 - 正确写法：
<a href="#"><abbr title="Application Programming Interface">API</abbr></a> - 中文页中写
URL，必须加lang="en"，否则 VoiceOver 可能读成 “U-R-L” - 禁止嵌套：
<abbr>HTML:<abbr>CSS</abbr></abbr>会导致内层title被忽略 -
acronym已废弃，所有缩写（包括 NASA、JSON）统一用abbr
title 是给机器读的，正文里的全称才是给人看的——这点最容易被跳过。 
