正确使用<img/> alt属性作为图片引用?

时间:2015-12-31 09:20:59

标签: html5 seo semantic-markup alt

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

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

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

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

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

  

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

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

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

然后我认为这最有意义:

  

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

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

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

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

1 个答案:

答案 0 :(得分: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。这样就可以使用qcite等标记作为后备/替代内容。但是,我不知道各种消费者对它的支持程度如何。

<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>