图片引号的 <img> alt 属性的正确用法？

Question

如果引用图片，alt 属性的正确用法是什么？

它似乎可以作为带有“装饰文本”的图像，which W3C recommends 将整个文本放在 alt 属性中。但是，我猜他们对修饰文本的想法是一个简短的短语。事实上，他们建议 alt 属性使用“短线”。

此外，some screen readers 显然将文本分成 125 个字符的块。

更具体到我的情况（因为这个问题可能看起来微不足道），我经营一个获得大量流量的报价网站，因此确保它可访问且语义对我来说很重要。在下一个版本中，引号将显示为拼贴画——一些文字，一些图片引号。

我最初计划使用以下内容，基于 alt 属性应该用短句描述图像的事实：

关于勇气、毅力和成功的图片引用

这很简短，描述性强，非常适合 SEO。然而，在我看来，像这样的描述对于浏览网站上的引文的盲人来说毫无用处。是的，他们可以点击获取整个报价，但替代文本不会使原始图像或页面对他们非常有用。

而且，作为事后的想法，我不知道是否应该使用“图片”这个词。通常建议省略图像、图片、图标等字词。但在这种情况下，它似乎很有用，可以为用户提供有关正在阅读的内容的更多信息——考虑到 alt 文本实际上是打开的内容图像，而不是原始图像。而且我不认为应该在 alt 属性中引用实际图像，因为图像的“目的”是呈现报价。

然后我认为这是最有意义的：

Anne M. Lindbergh 的名言：“尝试过同样需要勇气 并失败了，因为它已经尝试并成功了。'

这为用户提供了即将阅读给他们的内容的描述，然后是一个冒号——据我了解，这会导致屏幕阅读器暂停——并以引用结束。

唯一的问题是长引号（最多可包含 200 到 600 个字符）在用作替代文本时会给屏幕阅读器带来问题。我什至想知道这种格式是否会对 SEO 产生负面影响（让它看起来像是我过度优化了）。

因此，考虑到所有这些，我是否应该将图片引用本质上视为“复杂”图像，因此无法访问？还是我应该添加所有文本并希望最好？

Answer 1

如果img 元素是a 元素的唯一内容，则alt 属性必须描述链接的目的，而不必描述图像本身 (details)。

但是您的情况并没有真正的区别，因为图像包含完整的引用和作者，这两个部分之一（或两者）将是访问链接的原因，因此您应该传达它们在alt 中也是如此。

因此，请在alt 中准确包含图像上看到的内容。您可以考虑添加“引用”，但这对于有关引用的网站可能不是必需的。但我不会添加“图片”，因为报价以图像的形式提供似乎并不相关（它会描述图像，但您应该描述链接的目的）。

<a href="/anne-m-lindbergh/quote-1">
  <img 
    src="/anne-m-lindbergh/quote-1.png" 
    alt="Anne M. Lindbergh: “It takes as much courage to have tried and failed as it does to have tried and succeeded.”" 
    />
</a>

如果对alt 来说太复杂（例如，太长），你could use object instead of img。这也将允许使用 q 和 cite 之类的标记作为备用/替代内容。但是，不知道各个消费者对它的支持程度如何。

<a href="/anne-m-lindbergh/quote-1">
  <object data="/anne-m-lindbergh/quote-1.png" type="image/png">
    <cite>Anne M. Lindbergh</cite>:
    <q>It takes as much courage to have tried and failed as it does to have tried and succeeded.</q>
  </object>
</a>