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

Question

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

它似乎有资格作为图像 'decorated text,' which W3C recommends 将整个文本放在 alt 属性中。但是，我猜他们对装饰文本的想法是一个简短的短语。事实上，他们为 alt 属性推荐 'short line'。

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

更具体到我的情况（因为这个问题可能看起来微不足道），我运行一个引述网站有相当多的流量，所以确保它的可访问性和语义对我来说很重要。在下一个版本中，引述将显示为拼贴画——一些文本，一些图片引述。

我最初打算使用以下内容，基于alt属性应该用一个简短的句子来描述图像：

Picture quote about courage, perseverance, and success

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

而且，事后想来，我不知道是否应该使用 "picture" 这个词。通常建议省略图像、图片、图标等词。但在这种情况下，它似乎很有用，可以为用户提供有关正在向他们阅读的内容的更多信息——考虑到替代文本实际上是什么图像，而不是原始图像是什么。而且我认为根本不应该在 alt 属性中引用实际图像，因为图像的 'purpose' 是引用。

然后我认为这最有意义：

Quote By Anne M. Lindbergh: 'It takes as much courage to have tried and failed as it does to have tried and succeeded.'

这向用户描述了将要读给他们听的内容，后跟一个冒号——据我所知，这会导致屏幕阅读器暂停——并以引文结尾。

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

所以考虑到所有这些，我是否应该将图片引述视为 'complex' 图片，因此无法访问？还是我应该添加所有文本并希望最好？

Answer 1

如果 img 元素是 a 元素的唯一内容，则 alt 属性必须描述 link 的用途，不一定是图像本身 (details).

但是你的情况并没有什么区别，因为图像包含完整的引述和作者，这两部分之一（或两者）将是访问 link 的原因, 所以你也应该在 alt 中传达它们。

因此，请在 alt 中准确包含图片中显示的内容。您可以考虑添加 "Quote of"，但这对于引述网站可能没有必要。但我不会添加 "Picture of"，因为以图像的形式提供报价似乎并不相关（它会描述图像，但你应该描述 [= 的目的35=]).

<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。这也允许对 fallback/alternative 内容使用 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>

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

Correct usage of <img> alt attribute for picture quotes?

html

seo

semantic-markup

alt