Question

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

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

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

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

我最初计划使用以下内容，因为alt属性应该用短句描述图像：

关于勇气，毅力和成功的图片报价

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

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

然后我认为这最有意义：

引用安妮·M·林德伯格：'尝试时需要同样的勇气并且失败，因为它尝试并成功。'

这为用户提供了将要阅读的内容的描述，然后是冒号 - 根据我的理解，这将导致屏幕阅读器暂停 - 并以引用结束。

唯一的问题是，长引号（最多可达200到600个字符）会在用作替代文字时为屏幕阅读器带来问题。我甚至怀疑这种格式是否会对SEO产生负面影响（使其看起来像我过度优化）。

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

Answer 1

如果img元素是a元素的唯一内容，则alt属性必须描述链接的目的，而不一定是图像本身（{{3} }）。

但是你的情况并没有什么不同，因为图像包含完整的引用和作者，这两个部分中的一个（或两者）将是访问链接的原因，所以你应该传达它们也在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变得过于复杂（例如，太长），则为details。这样就可以使用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属性作为图片引用？

1 个答案: