abbr标签必须带title属性，否则屏幕阅读器不朗读、悬停无提示、SEO无语义；title值须为标准全称，首次出现应前置全称，且需配合lang等属性保障可访问性。
abbr 标签必须带 title 属性，否则在屏幕阅读器中不朗读全称、鼠标悬停无提示、搜索引擎也收不到语义信号——这不是“可选优化”，而是功能开关。
abbr 的全称展示只依赖 title 属性
浏览器不会自动推断缩写含义，abbr 内容本身只是显示文本，完整释义必须显式写在 title 里。比如 <abbr title="Cascading Style Sheets">CSS</abbr> 才能让辅助工具读出“Cascading Style Sheets”；若漏掉 title，它就和普通 span 没区别。
-
title值需与标准全称一致（如 “JavaScript”，不能小写为 “javascript”），否则语音合成器可能拆字误读 - 首次出现缩写时，建议前置全称 +
abbr，例如：<p>超文本标记语言（HTML）是一种……</p>，再后续才单独用<abbr title="HyperText Markup Language">HTML</abbr> - 机构名、技术术语优先采用官网或维基的标准全称，比如
WHO对应"World Health Organization"，不是 “World Health Org” 或缩写变体
屏幕阅读器如何处理 abbr
主流屏幕阅读器（NVDA、JAWS、VoiceOver）默认会读出 title 值，但前提是该元素可聚焦且未被 CSS 隐藏或覆盖。若页面禁用了 title 提示（如通过 pointer-events: none 或 display: none），读屏软件也会跳过。
- 读屏行为不可靠的常见原因：父级设置了
aria-hidden="true"，或abbr被包裹在div[role="presentation"]中 - 部分旧版 JAWS 默认只读一次
abbr全称，之后重复出现时只读缩写——这依赖用户设置，开发者无法控制，所以首次出现时务必补全 -
lang属性建议配合使用，例如<abbr lang="en" title="Representational State Transfer">REST</abbr>，帮助语音引擎切换发音规则
触摸与键盘用户的交互盲区
原生 abbr[title] 的浏览器 tooltip 仅响应鼠标悬停，在手机、平板或纯键盘导航场景下完全不可见——这不是 bug，是设计限制。
立即学习“前端免费学习笔记（深入）”；
- 添加
tabindex="0"可让键盘用户 tab 到abbr并触发:focus状态 - 用 CSS 的
::after+attr(title)可实现 hover/focus/active 三态 tooltip，但需注意移动端点击后 tooltip 不自动消失的问题 - 不要依赖
title作为唯一信息通道：对关键术语，仍应在上下文中提供一次完整解释，abbr是增强，不是替代
真正容易被忽略的点是：即使写了 title，如果团队没建立缩写词表、没做全站一致性校验，同一个缩写在不同页面可能有不同全称，导致读屏结果混乱、SEO 语义冲突。这不是技术问题，是协作流程问题。
