HTML img 标签：title 属性与 alt 属性？

Question

我在浏览 亚马逊 时注意到，在搜索“ 1TB ”时，如果您将鼠标光标悬停在星级评分图像上，您只能在使用 IE 时看到分数。如果您使用其他浏览器，则不会显示分数。

3.8 分和 4.2 分都显示为 4 星。当然，3.8 星对 4.2 星（76% 对 84% 的分数）可能会有所作为！

这是因为显示 alt 文本的标准方式仅在用户关闭图形或“读出”浏览器时（例如，视障用户的浏览器）。然而，IE 在悬停时显示它。

所以我认为如果亚马逊不管用户的浏览器都显示它，那么除了 title 之外，还应该使用 alt 。你会同意吗？

原文由 nonopolarity 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

我两个都去。标题将在所有浏览器中显示一个不错的工具提示，而在没有图像的浏览器中浏览时，alt 将给出描述。

也就是说，我很想看看有多少“冲浪者”去“商店”浏览商品实际上已关闭图像或使用不支持图像的浏览器。我认为 90% 的人口使用 28k 调制解调器连接到 InterWeb 的日子已经过去了。

原文由 scunliffe 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

我总是会同时使用 alt 和 title 属性。它们各自用于不同的目的： alt 用于在丢失图像、缓慢图像下载或辅助技术中进行图像替换，而 title 用于翻转交互和附加图像描述。

此外，在 HTML5 中，您应该开始使用新的 HTML5 picture 包含在 figure --- 中的元素，具有完整 的 WPA-ARIA 属性以提高可访问性，并支持辅助技术、屏幕阅读器、之类的。因为这个元素在许多旧浏览器中不受支持……但是会优雅地降级……我现在推荐以下 HTML 设计模式用于 HTML 中的图像：

 <figure aria-labelledby="picturecaption2">
    <picture id="picture2">
        <source srcset="image.webp" type="image/webp" media="(min-width: 800px)" />
        <source srcset="image.gif" type="image/gif" />
        <img id="image2" style="height:auto;max-width: 100%;" src="image.jpg" width="255" height="200" alt="image:The World Wide Web" title="The World Wide Web" loading="lazy" no-referrer="no-referrer" onerror="this.onerror=null;" />
    </picture>
    <figcaption id="picturecaption2"><small>"My Cool Picture" [<a href="http://creativecommons.org/licenses/" target="_blank">A License</a>] , via <a href="https://commons.wikimedia.org/wiki/" target="_blank">Wikimedia Commons</a></small></figcaption>
</figure>

上面的代码除了 alt 和 title 之外还有许多额外的“好东西”，包括 ARIA 属性、对 WebP 的支持、支持更高分辨率图像的媒体查询以及支持旧图像的不错的后备模式格式。它显示了一个完全装饰的图像示例，该示例使用新技术，同时仍支持具有渐进式设计模式的旧技术。

20 多年来，许多开发人员一直在使用这种模式来处理 IE 和其他问题。所以这不是新知识。它刚刚被没有费心从过去学习的新开发人员重新发现。

记住…永远支持老浏览器！

原文由 Stokely 发布，翻译遵循 CC BY-SA 4.0 许可协议