如何通过_abbr标签实现缩写词全称的悬停解释及语义化支持？

本文共计657个文字，预计阅读时间需要3分钟。

title 属性——但这个行为不可控、不可样式化、移动端基本失效。>鼠标悬停提示功能

abbr 必须配非空 title 才算有效语义

没写 title 的 abbr 和 span 没区别：屏幕阅读器跳过、Lighthouse 报“missing description”、搜索引擎忽略语义。常见错误包括：

• title="" 或 title=" " —— 被视为缺失
• title="JavaScript Object Notation (JSON)" —— 括号和冗余描述违反规范，应简化为 title="JavaScript Object Notation"
• 把全称写在标签内容里，比如 <abbr title="">JSON (JavaScript Object Notation)</abbr> —— 破坏可访问性，且 title 为空

缩写首次出现时，别只靠 abbr+title

仅靠 <abbr title="Application Programming Interface">API</abbr> 不足以确保理解，尤其对非母语或认知障碍用户。WCAG 推荐做法是：

• 先自然写出全称，再括号给出缩写：Application Programming Interface (API)
• 之后再单独使用 <abbr title="Application Programming Interface">API</abbr> 即可
• 若页面跨章节/跨页，仍建议保留 title，避免上下文丢失

想让悬停提示稳定可用？不能只依赖 title

Chrome/Firefox 对 title 的渲染已趋于保守（Chrome 默认禁用 hover 提示），Safari 移动端仅长按短暂弹出，Android Chrome 基本不响应。真实项目中要稳定实现视觉提示，得另起炉灶：

• 用 data-title 存全称，配合 CSS ::after + content: attr(data-title) 实现可控 tooltip
• 同时保留 abbr[title]，保障语义和读屏器支持
• 若需键盘可访问，加 tabindex="0" 和 aria-describedby 关联隐藏解释段落
• 绝对不要给 abbr 同时设 title 和 aria-label —— 后者会覆盖前者，导致读屏器完全跳过缩写本体

最常被忽略的一点：缩写是否真有必要用 abbr？不是所有“看起来像缩写”的词都该标记——比如 “vs”、“eg”、“etc” 属于拉丁缩写，通用程度高，无需强制展开；而 “JWT”、“SSR”、“CSR” 这类技术术语首次出现时，才值得用 abbr + 准确 title + 正文全称三重保障。