alt是强制性可访问性属性，仅在图像无法加载时替代显示并供屏幕阅读器朗读；title是通用提示属性，仅鼠标悬停时显示工具提示，对无障碍和SEO几无帮助。
title 和 alt 不是“都能写在 <img> 上所以差不多”的两个属性——它们解决的是完全不同的问题，混用或互换会直接损害可访问性、SEO 和跨浏览器行为。
alt 属性只在图像加载失败或禁用时生效，且必须写
它不是提示框，不是悬停文字，也不是“补充说明”。它的唯一职责是：当 <img> 无法渲染时，替代图像本身占据位置，并向屏幕阅读器传递语义。浏览器不加载图片、路径出错、用户关闭图片、甚至某些邮件客户端屏蔽远程图，都会触发 alt 显示。
-
alt是<img>的**强制性可访问性属性**（W3C WCAG 要求），缺失会导致无障碍审计失败 - 空值
alt=""合法且必要——用于纯装饰图（如分隔线、背景花边），告诉屏幕阅读器“跳过这个” - 含空格的
alt=" "或仅空格字符串 ≠ 空值，会被读作“空白”，应避免 - 搜索引擎解析图片内容几乎全依赖
alt文本，堆砌关键词（如alt="red shoes buy cheap shoes online shoes"）反而被降权
title 属性是通用提示，但对 <img> 实际价值很低
它在绝大多数现代浏览器中表现为鼠标悬停时的 tooltip，但这个行为不受标准强制约束——Safari 可能压根不显示，Firefox 截断超 60 字符，移动端基本不可用。更重要的是：title 不被主流屏幕阅读器默认朗读（除非用户手动开启“读取 title”选项），对视障用户几无帮助。
-
title可用于<a>、<button>、<div>等几乎所有元素，但<img>是它最没必要的使用场景之一 - 旧版 IE（≤7）曾把
title当作alt渲染，导致开发者误以为“写了 title 就够了”——这个历史包袱早已清零，别再沿用 - 若真需为图片提供额外上下文（比如拍摄时间、版权信息），优先用
<figure><figcaption>，而非依赖不可靠的title
同时写 alt 和 title 时，别让它们重复或冲突
常见错误是复制粘贴同一段文字到两个属性：alt="公司Logo" + title="公司Logo"。这既浪费字符，又让屏幕阅读器重复朗读两次，还可能在部分浏览器 tooltip 中暴露冗余信息。
立即学习“前端免费学习笔记（深入）”；
- 如果图片已有清晰
alt（如alt="支付宝付款码界面截图"），title应提供真正额外的信息（如title="2026年6月新版UI，支持扫码后自动填充金额"） - 若
alt已足够完整（例如描述性足够强的摄影图），title完全可以省略——不写比乱写更安全 - 当
<a>包裹<img>时，链接的title会被忽略，最终生效的是<img>的title；而alt始终由<img>自己负责
alt 的长度和语义比“看起来像不像”重要得多
很多开发者盯着预览效果调 alt，却忽略它本质是给非视觉用户“听”的一段话。一个 50 字的精准描述，远胜于 10 字的模糊标签。
- 避免使用 “图片”、“图像”、“logo” 这类无效词开头——屏幕阅读器已告知用户这是图片
- 功能性图片（如提交按钮的
<input type="image">）的alt必须说明动作，如alt="搜索"，而非alt="放大镜图标" - 图表类图片需提炼关键结论，而非罗列数据：“柱状图显示Q2销售额增长37%” 比 “横轴月份，纵轴万元，蓝色柱子…” 更有效
- Chrome DevTools 的 Lighthouse 审计会直接标记
alt缺失或为空（非装饰图），这是上线前必查项
真正难的不是记住“alt 是替代文本、title 是提示”，而是每次写 <img> 时，停下来问一句：如果这张图彻底消失了，用户还能不能理解这一块在说什么？那个答案，就是 alt 的唯一正解。
