title属性仅在语义合理、交互明确的元素（如、、等）上有效，移动端不支持悬停触发，且不参与seo；应优先用aria-label或aria-describedby提升可访问性。
title 属性不是“随便加个提示”的万能开关，它只在极简、静态、无障碍友好的场景下才真正有效；用错地方反而会掩盖可访问性缺陷或导致移动端完全失效。
title 属性该加在哪些 HTML 元素上？
理论上所有 HTML 元素都支持 title（HTML5 全局属性），但**是否该加，取决于语义合理性与实际触发条件**：
-
<a></a>、<img>、<button></button>、<input>、<abbr></abbr>这类有明确交互或缩写含义的元素，加title是合理且常见的 <div> 或 <code><span></span>上硬加title="点击展开"很可能无效——它们默认不可聚焦、无交互行为，旧版 Safari 甚至不触发提示<table> 或 <code><th> 加 <code>title可辅助说明列含义，但若内容超 120 字符或需换行，就已超出title能力边界- 绝对不要加在
<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> 类非交互元素 <h3>title 和 aria-label / aria-describedby 怎么选？</h3> <p>三者目标不同，混用或替代都会出问题：</p> <ul> <li> <code>title：纯展示型提示，浏览器自动渲染，**屏幕阅读器会读出，但仅限鼠标悬停/键盘聚焦时触发** -
aria-label：覆盖元素默认可访问名称，**不生成视觉提示，仅服务辅助技术**；适合图标按钮（如<button aria-label="删除"><svg></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="移除"></button>——两者冲突，屏幕阅读器可能只读aria-label，而title在桌面端又多出一个冗余提示 - 需要支持点击触发（而非悬停）——
title在 iOS 上基本不可用，得用 JS +data-tooltip+touchstart模拟 - 提示内容含动态数据（如 “库存剩
<span id="stock">3</span>件”）——title是静态字符串，无法响应 DOM 更新 - 要参与 SEO 或分享卡片生成——
title属性内容**不被搜索引擎索引**，对排名和社交平台预览毫无帮助 - 需要支持键盘用户连续 tab 到提示并读出——
title在 focus 状态下虽可读，但缺乏焦点管理、无关闭机制，不符合 WCAG 2.1 标准
为什么鼠标悬停没反应？常见失效原因
写了 title="操作说明" 却没提示，不是浏览器坏了，而是以下某条在起作用：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
移动端和 SEO 场景下必须绕开 title
如果你的需求涉及以下任一条件，title 就不该是首选方案：
真正容易被忽略的是：哪怕你用了完美的自定义 tooltip，如果没配 aria-describedby 指向提示容器，屏幕阅读器用户依然不知道那块浮层和当前按钮有关联——这点 title 天然做到，也是它唯一不可替代的价值。
