图片标题属性或链接标题属性或两者兼而有之？答案

【问题标题】：Image title attribute or link title attribute or both?图片标题属性或链接标题属性或两者兼而有之？
【发布时间】：2013-11-14 09:00:41
【问题描述】：

假设我在页面上有一个包含在链接中的图像列表。因此，当您单击图像时，它会将您带到显示较大图像的页面

这里应该如何处理标题标签？

我是把图片标题放在图片和链接上，还是只放在图片上？标题是否与“alt”属性相同有关系吗？

<a title="image description" href="#"><img title="image description" alt="image description" src="image.jpg"></a>

【问题讨论】：

【解决方案1】：

HTML5 定义了alt 使用指南。请参阅“A link or button containing nothing but an image”部分：

当作为超链接的a 元素或button 元素没有文本内容但包含一个或多个图像时，请在alt 属性中包含文本，以共同传达链接的目的链接或按钮。

因此，您的 alt 属性内容可能包含“打开更大版本的……”之类的内容。

（您可能还对my answer 对 UX SE 的问题感兴趣：对于同时也是链接的图像，ALT 文本应该是什么？）

alt 和 title 的内容绝不应该相同。请参阅general guidelines (from the W3C Candidate Recommendation of HTML5)（更新：在 HTML5 的 W3C 建议中，this section got changed，它不再包含该引用。）：

由此得出的结论是alt 属性的值不应包含可被视为图像标题、标题或图例的文本。它应该包含用户可以使用的替换文本而不是图像；它不是为了补充图像。 title 属性可用于补充信息。

【讨论】：

【解决方案2】：

图片标题属性应该描述图片。

链接标题属性应该描述链接的目标。

<a title="view larger version" href="#">
  <img title="image description" alt="image description" src="image.jpg">
</a>

【讨论】：

实际上，当鼠标悬停时，图像标题似乎优先。我在 macOS 上使用 Safari、Chrome 和 Firefox 进行了测试。删除 img 标题后，悬停时会显示链接标题。