title属性是HTML全局属性，仅提供浏览器原生工具提示，不生成DOM节点、不可样式化、无障碍支持弱，仅适用于非关键的兜底辅助文本。
title属性只触发浏览器原生提示，不是真正的UI组件
title 属性是 HTML 全局属性，任何元素都能用，但它不生成 DOM 节点，也不参与 CSS 渲染流程。它只是向浏览器提供一段纯文本，由浏览器决定是否显示、何时显示、怎么显示——你无法用 CSS 选中它，也不能用 JavaScript 直接监听它的显示/隐藏事件。
常见错误是把它当“轻量 tooltip 组件”来用：比如给 <img alt="title属性起什么提示作用_HTML全局工具提示机制" > 加 title="加载失败时的备用说明"，结果发现屏幕阅读器读不出来（因为没语义关联），或者在 iOS Safari 上点了半天没反应。
- 延迟约 700–1000ms 才出现，用户快速划过根本看不到
- 移动端基本靠点击触发，且常与长按菜单冲突
- 内容被截断或转义：换行符
\n、HTML 标签、emoji 都会被忽略或渲染异常 - 无障碍支持弱：不自动绑定
aria-label或aria-describedby，WCAG 2.1 明确不建议依赖它传递关键信息
哪些场景下还能放心用 title 属性
它唯一靠谱的用途，是作为「兜底辅助文本」——即当其他机制（如 aria-label、alt、显式提示层）都失效时，浏览器至少还能吐出一句话。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
典型可用场景：
立即学习“前端免费学习笔记（深入）”；
-
<a href="https://www.php.cn/link/263b1243ca2dbeb358777ceabc4a2e4c">链接文字</a>的title补充目标 URL 语义（如 "跳转至帮助中心 PDF 下载页"） -
<input type="text">搭配placeholder用作二次提示（但不应替代label） <table> 或 <code><th> 中对列含义做极简说明（如 <code>title="单位：万元，四舍五入到小数点后两位"）注意：只要设计稿里写了「带背景色/箭头/动画/可点击」，
title就不该出现在实现方案里。title 和 aria-describedby 混用会出什么问题
很多人想“双保险”，一边写
title="请上传 JPG"，一边又加aria-describedby="hint-1"。这反而会破坏可访问性。原因：
- 屏幕阅读器可能重复播报：先读
title，再根据aria-describedby找到并读取关联元素，造成冗余 - 若隐藏提示元素用了
opacity: 0而非display: none，aria-describedby仍会把它当作有效目标，但视觉上不可见，违反一致性原则 -
title值若含特殊字符（如引号、尖括号），可能意外破坏 HTML 结构，而aria-describedby的id匹配是大小写敏感且无容错的
正确做法：二选一。关键提示走
aria-describedby+ JS 控制显隐；次要、非交互类补充信息，才考虑title。移动端和高对比度模式下 title 几乎不可信
iOS Safari 自 iOS 15 起默认禁用
title的悬停行为；Android Chrome 对触摸设备也仅在长按后短暂显示，且位置固定在手指上方，常被键盘或系统 UI 遮挡。更麻烦的是高对比度模式（Windows / macOS 系统级设置）：多数浏览器会直接禁用
title提示，因为它依赖默认样式，而高对比度主题会重置所有颜色和边框——结果就是“有提示，但看不见”。如果你的页面要过 WCAG AA 或企业内网合规审计，
title必须被视作“不存在”。真正能落地的方案只有两种：aria-describedby+ 显式 DOM 元素，或用@radix-ui/react-tooltip这类已通过 a11y 测试的库。- 屏幕阅读器可能重复播报：先读
