alt是强制可访问性属性，用于src失效时替代图像并传递语义；必须非空且具上下文，装饰图应alt=""；title对img无效，不应替代alt；alt语义完整性优先于长度。

alt 是强制可访问性属性，不是“提示文字”

alt 不是鼠标悬停时弹出的 tooltip，也不是图片的“补充说明”。它的唯一作用是：当 src 失效（路径错、网络断、图片被禁用、屏幕阅读器环境）时，替代图像本身占据视觉位置，并向辅助技术传递语义。W3C WCAG 明确要求 img 必须有 alt，缺失即无障碍违规。

常见错误包括：

• 写成 alt="logo" —— 缺少上下文，应写 alt="公司官方Logo，蓝色圆形设计"
• 装饰图用了 alt="decorative" 或 alt=" "（带空格）—— 正确写法是 alt=""
• 在邮件模板或 CMS 导出 HTML 时自动删掉 alt —— 导致大量图片无替代文本

搜索引擎解析图片内容几乎全靠 alt 文本，但堆砌关键词（如 alt="red shoes buy cheap shoes online shoes"）会被判定为 spam，反而降权。

title 在 img 上基本没用，别把它当 alt 的备选

title 是通用提示属性，可用在几乎所有 HTML 元素上，但它对 img 的实际价值极低：

• 现代浏览器中，title 表现为鼠标悬停 tooltip，但 Safari 可能完全不显示，Firefox 截断超 60 字符，移动端基本不可触发
• 主流屏幕阅读器默认不朗读 title（除非用户手动开启“读取 title”选项），对视障用户无效
• 旧版 IE（≤7）曾错误地把 title 当作 alt 渲染，这个历史 bug 已清零，别再沿用

如果真需要提供额外信息（如拍摄时间、版权方、版本说明），优先用 <figure><figcaption></figcaption></figure> 组合，而不是依赖不可靠的 title。

米粿AI

一款AI图像与设计工具，主要用于AI辅助动漫创作工具，专为专业漫画师和动画制作团队设计，适合需要提升相关任务效率的用户。

下载

同时写 alt 和 title 时，必须避免重复或冲突

很多人复制同一段文字到两个属性：alt="支付宝付款码" + title="支付宝付款码"。这会导致：

• 屏幕阅读器重复朗读两次，干扰用户
• 部分浏览器 tooltip 中暴露冗余信息
• 浪费 HTML 字节数，无实际收益

正确做法是：

• 确保 alt 自身已完整描述图像功能或内容（例如 alt="2026年新版支付宝付款码界面，支持扫码后自动填充金额"）
• title 仅补充真正额外、非必要但有时有用的信息（如 title="上线日期：2026-06-15；适配 Android 14 & iOS 18"）
• 如果 alt 已足够清晰，title 完全可以省略 —— 不写比乱写更安全

包裹在 里的 img，title 会被忽略

当 img 被 <a href="..."></a> 包裹时，链接本身的 title 属性会被浏览器忽略，最终生效的是 img 的 title。而 alt 始终由 img 自己负责，不受父元素影响。

这意味着：

• 不要指望给 <a></a> 加 title 来提示图片链接目标 —— 应该靠 alt 描述图像+链接意图（例如 alt="前往用户中心设置页面"）
• 如果链接需额外说明，应使用 <figure></figure> 或旁白文字，而非依赖 title

最常被忽略的一点是：alt 的语义完整性永远优先于长度控制。宁可写一句准确的话，也不要为了“简短”牺牲可理解性 —— 屏幕阅读器用户听不懂缩写和模糊词，搜索引擎也抓不到真实意图。