先记住这个答案
alt 负责替代图片传达的信息或操作功能，title 只是可能出现的附加提示，不能保证触摸和读屏用户获得它。商品图若展示款式或颜色，应让这些信息存在于替代文本或邻近正文；若只是重复链接中的商品名，空 alt 可能更清楚。写法取决于图片在该处的作用，不是把同一句话复制到两个属性。
alt是图片的文本替代title常是悬停提示- 触摸与键盘不能依赖悬停
- 替代文本要看图片用途
商品图片的悬停提示
商品列表的图片旁已显示商品名，开发者只给图片加 title="轻量登山鞋"，没有 alt。鼠标悬停看似有提示，但图片加载失败或读屏时缺少可靠替代。若图片本身是详情链接的一部分，要让链接的可访问名称清楚；若旁边商品名已承担名称，图片的 alt 可根据是否提供额外信息决定内容，避免重复读两遍。
<a href="/shoes/1">
<img src="/shoe.jpg" alt="轻量登山鞋的侧面外观">
<span>轻量登山鞋</span>
</a>
<!-- title 不是图像替代文本，也不是必填项 -->替代文本应按图片在当前上下文中的作用来写。
这个示例的链接已有可见商品名，图片的替代文本补充了“侧面外观”这一点。如果图片只是商品名旁边重复出现的装饰缩略图，空 alt 反而可能更顺畅；如果图片展示了颜色、瑕疵等购买决策信息，就应把那条信息写进 alt 或紧邻的文字。不能脱离链接周围的内容，给所有商品图套同一个属性值。
title 不能承担图像替代
信息图需要说明关键信息，纯装饰图可用空 alt，链接中的图片则可能参与链接名称。title 是附加提示，不保证每种输入方式都能看到或听到；把必要信息只放在那里会遗漏用户。若图像旁已有充分文字，要评估读屏结果是否重复，而不是无条件复制同一字符串到 alt 和 title。
检查时把图片暂时隐藏，只读页面剩下的文字：用户还能否知道这个链接卖什么、图里有无额外信息？再用键盘和读屏检查链接读出的名称。这样的测试能直接发现“鼠标悬停时看得到，其他人却不知道”的遗漏。
若图片用于比较两个颜色版本，单写商品名就不足以区分两张图；应把“黑色款”“米色款”等真正影响选择的信息放进替代文本或可见选项名称。
容易答错的地方
- 只写
title就认为无障碍完成 - 悬停提示不能可靠替代图片所需的文本内容。
- 把文件名当成
alt alt要写图片在页面中的内容或功能，不是资源管理信息。
面试官还会怎么问？
图片加载失败时哪个文本能顶上？
alt 是图片的替代文本，title 不承担同样职责。
装饰图要不要写 title？
通常不需要，额外提示会把本应忽略的装饰重新暴露给用户。
链接里图片与文字重复怎么处理？
先确认链接整体的可访问名称，再决定图片 alt 是否需要补充信息或可留空。
参考资料
示例用于理解所注明的运行环境与边界；延伸学习可结合原文中的更多案例。