title属性仅在语义合理、交互明确的元素（如、<img>、<button>等）上有效，移动端不支持悬停触发，且不参与SEO；应优先用aria-label或aria-describedby提升可访问性。
title 属性不是“随便加个提示”的万能开关，它只在极简、静态、无障碍友好的场景下才真正有效；用错地方反而会掩盖可访问性缺陷或导致移动端完全失效。
title 属性该加在哪些 HTML 元素上？
理论上所有 HTML 元素都支持 title（HTML5 全局属性），但**是否该加，取决于语义合理性与实际触发条件**：
-
<a>、<img>、<button>、<input>、<abbr>这类有明确交互或缩写含义的元素，加title是合理且常见的 -
<div>或<span>上硬加title="点击展开"很可能无效——它们默认不可聚焦、无交互行为，旧版 Safari 甚至不触发提示 -
<table>或<th>加title可辅助说明列含义，但若内容超 120 字符或需换行，就已超出title能力边界 - 绝对不要加在
<title>标签自身上——它不接受任何全局属性，<title title="xxx">会被浏览器忽略
为什么鼠标悬停没反应？常见失效原因
写了 title="操作说明" 却没提示，不是浏览器坏了，而是以下某条在起作用：
- 父容器设置了
overflow: hidden——虽然title提示框本身不受裁切影响，但若元素被遮挡（比如伪元素::before覆盖了整个区域），实际悬停对象就不是原标签 - 元素设置了
pointer-events: none——浏览器压根收不到事件，title自然不会出现 - 在 iOS Safari 中测试 ——它**完全不支持 hover 触发
title**，仅部分 Android 浏览器支持长按模拟，不能当作主要交互路径 - 元素不可聚焦且无 tabindex ——某些旧版 Safari 要求
tabindex="0"才能激活title，尤其对<div>类非交互元素
title 和 aria-label / aria-describedby 怎么选？
三者目标不同，混用或替代都会出问题：
立即学习“前端免费学习笔记（深入）”；
-
title：纯展示型提示，浏览器自动渲染，**屏幕阅读器会读出，但仅限鼠标悬停/键盘聚焦时触发** -
aria-label：覆盖元素默认可访问名称，**不生成视觉提示，仅服务辅助技术**；适合图标按钮（如<button aria-label="删除"><svg></button>） -
aria-describedby：将提示内容关联到当前元素，**需配合真实 DOM 元素 ID 使用**（如<button aria-describedby="hint-1"></button><div id="hint-1" class="sr-only">删除后不可恢复</div>），比title更可控、更语义化 - 错误做法：
<button title="删除" aria-label="移除">——两者冲突，屏幕阅读器可能只读aria-label，而title在桌面端又多出一个冗余提示
移动端和 SEO 场景下必须绕开 title
如果你的需求涉及以下任一条件，title 就不该是首选方案：
- 需要支持点击触发（而非悬停）——
title在 iOS 上基本不可用，得用 JS +data-tooltip+touchstart模拟 - 提示内容含动态数据（如 “库存剩
<span id="stock">3</span>件”）——title是静态字符串，无法响应 DOM 更新 - 要参与 SEO 或分享卡片生成——
title属性内容**不被搜索引擎索引**，对排名和社交平台预览毫无帮助 - 需要支持键盘用户连续 tab 到提示并读出——
title在 focus 状态下虽可读，但缺乏焦点管理、无关闭机制，不符合 WCAG 2.1 标准
真正容易被忽略的是：哪怕你用了完美的自定义 tooltip，如果没配 aria-describedby 指向提示容器，屏幕阅读器用户依然不知道那块浮层和当前按钮有关联——这点 title 天然做到，也是它唯一不可替代的价值。
