移动端abbr的title属性完全无效，必须用data-title+JS实现可访问提示层，并首次出现时写出全称。
abbr 的 title 在移动端根本不会触发，别试了
iOS Safari 和 Android Chrome（包括 WebView/PWA）对 title 属性的悬停/长按响应是明确不支持的——这不是兼容性问题，而是浏览器规范允许的行为。你在桌面 Chrome 里看到 tooltip，不代表它在手机上存在；DevTools 的“设备模拟”也常误报，真机长按基本无反应。靠 title 实现移动端提示，等于没做。
必须用 data-title + JS 实现可聚焦、可点击、可朗读的提示层
核心思路：保留 abbr[title] 满足语义和读屏器基础需求，再用 data-title 存全称供 JS 提取，避免污染原生 title（某些读屏器会优先读它）。关键点如下：
-
abbr必须加tabindex="0"，否则键盘用户无法Tab进入，屏幕阅读器也无法聚焦 - 监听
mouseenter（非onmouseover），避免父级事件冒泡重复触发 - 移动端需额外监听
click和focus，点击展开、键盘空格键也应触发 - 提示层用
position: fixed，防止被transform或overflow: hidden父容器裁剪 - 必须设
role="tooltip"和动态切换aria-hidden="true/false"，否则 VoiceOver/NVDA 不会朗读内容
CSS 视觉强化不能只靠下划线，要配合 aria 状态
仅用 abbr[title] { text-decoration: underline dotted; cursor: help; } 是危险的：视觉线索 ≠ 可访问性。用户看不到“这是可交互的”，尤其色弱或高对比度模式下。正确做法：
- 样式只作用于
abbr[title]，防止无title的误伤标签也被加样式 - 用
::after添加小问号图标，但图标需aria-hidden="true"，避免读屏重复 - 焦点态加
outline（不可移除），并用abbr:focus::before显示“按空格查看解释”提示（仅限屏幕阅读器） - 禁用
pointer-events: none在提示层上，否则 iOS Safari 点击穿透失效
首次出现缩写必须正文写出全称，JS 提示只是补救
WCAG 要求首次出现缩写时，用户“一眼看懂”，而不是等悬停或点击。JS 提示再完善，也救不了这句话：<p>我们调用 API 接口。</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>。真正有效的写法是：
<p>Application Programming Interface (API) enables communication between services.</p>
后续再用 <abbr title="Application Programming Interface" data-title="Application Programming Interface">API</abbr> 才有意义。否则，移动端用户第一次见 API，既没上下文，又点不开提示——JS 再强也补不回语义断层。
