alt是图像语义替代，必须存在且不可为空；title在img上基本无效，非可访问性必需属性。

title 和 alt 不是两个可互换的“提示属性”，它们解决的问题完全不同：alt 是图像的语义替代，必须存在；title 是通用补充说明，在 <img> 上基本无效。

alt 属性是强制可访问性要求，不是“备用标题”

当图片加载失败、路径错误、用户禁用图片、或使用屏幕阅读器时，alt 文本会直接占据图像位置并被朗读。它不是悬停弹窗，也不是 SEO 堆关键词的地方。

• alt 必须写，且不能为空格字符串（如 alt=" "）——装饰图才用 alt=""
• 写 alt="logo" 是错的；应写 alt="知乎官方Logo，深蓝色水滴形图标"，带上下文
• 搜索引擎几乎只靠 alt 理解图片内容，但堆砌关键词（如 alt="red shoes buy cheap shoes"）会被判 spam
• 邮件客户端、CMS 导出工具常自动删 alt，需在构建流程中加检查

title 在 <img> 上实际作用极小，别拿来凑数

title 是全局属性，可用在 <div>、<button> 等几乎所有元素上，但在 <img> 上表现不可靠：

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

• Safari 可能完全不显示 title tooltip；Firefox 截断超 60 字符；移动端基本不触发
• 主流屏幕阅读器默认不读 title（除非用户手动开启“读取 title”选项）
• 旧版 IE（≤7）曾把 title 当 alt 渲染，这个 bug 已消失十多年，别再沿用
• 如果真需要额外信息（如拍摄时间、版权方），优先用 <figure><figcaption>，而不是塞进 title

同时写 alt 和 title 时，最容易踩的三个坑

很多人复制粘贴同一段文字到两个属性，结果既损害可访问性，又浪费字节。

立即学习“前端免费学习笔记（深入）”；

• 重复朗读：屏幕阅读器先读 alt，再读 title，造成干扰（如 alt="付款码" + title="付款码"）
• 冲突暴露：部分浏览器 tooltip 中会显示冗余信息，比如 alt="2026新版支付宝付款码" + title="2026新版支付宝付款码"
• 父元素覆盖：当 <img> 包在 <a> 内时，<a> 的 title 被忽略，最终生效的是 <img> 的 title —— 但链接意图仍得靠 alt 表达（如 alt="前往订单详情页"）

最常被忽略的一点：alt 的语义完整性永远优先于长度或“看起来像不像”。一个准确、简洁、带上下文的 alt，比两个属性都填满但语义模糊的文本更有价值。