为标记的图标图像提供替代文本是否有意义？

Question

图像的替代文字是 HTML 101，但是当替代文字与紧随其后的标签相同时有意义吗？对我来说，使用屏幕阅读器的人听两遍似乎是多余的。这是一个非常清楚的例子：

<nav>
  <ul>

    <li>
      <a href="/chameleons.html">
        <img src="chameleons_icon.png" alt="chameleons">
        Chameleons
      </a>
    </li>

    <li>
      <a href="/beardies.html">
        <img src="beardies_icon.png" alt="beardies">
        Beardies
      </a>
    </li>

    <li>
      <a href="/basilisks.html">
        <img src="basilisks_icon.png" alt="basilisks">
        Basilisks
      </a>
    </li>

    <li>
      <a href="/iguanas.html">
        <img src="iguanas_icon.png" alt="iguanas">
        Iguanas
      </a>
    </li>

  </ul>
</nav>

感谢您的意见！

修改：为了验证，我是直接用alt=""还是用背景图？

Answer 1

这是一种用户体验设计问题。

属性alt是在过去网络带宽很小的时候设计的，用来描述加载失败时图片的内容。

了解这一点，此处不需要 alt 属性，尤其是当它复制标签文本时。

但是如果图片加载失败就会出现问题。这里有一些替代方法可以解决这个问题。

第一个选择是，考虑使用 background-image 作为 <a> 标签，而不是在其中插入图像。任何丑陋的形象都不会出现。最好尝试 CSS Sprites。

如果你不使用 CSS Sprites，这里是代码。

CSS:

a.nav-icon {
  display: inline-block;
  padding-left: 24px; /* use the width of your image */
  background-repeat: no-repeat;
}
a.nav-icon-chameleons {
  background-image: url(chameleons_icon.png);
}

HTML:

<a class="nav-icon nav-icon-chameleons" href="/chameleons.html">
  Chameleons
</a>

最近流行的另一种选择是使用 SVG 或字体图标。如果您能找到一些有用的图标，请参阅 http://fontawesome.io/。

Answer 2

Section 4.7.1.1 of W3C HTML5 有一个非常庞大的列表，涵盖了 img 元素及其 alt 属性的许多常见用例。

您的用例似乎是 "A graphical representation of some of the surrounding text." 规范的内容如下：

In many cases, the image is actually just supplementary, and its presence merely reinforces the surrounding text. In these cases, the alt attribute must be present but its value must be the empty string.

In general, an image falls into this category if removing the image doesn't make the page any less useful, but including the image makes it a lot easier for users of visual browsers to understand the concept.

因此，在您的情况下，alt 属性可以（事实上，必须）为空，因为图像只是用来支持已经存在的文本主要内容的一部分，正如您所说，复制内容是不必要的，而且很突兀：

<li>
  <a href="/chameleons.html">
    <img src="chameleons_icon.png" alt="">
    Chameleons
  </a>
</li>

您可以更进一步，使用 figure 和 figcaption 标记所有内容，完全不需要 alt 属性，因为替代文本随后通过figcaption:

<li>
  <a href="/chameleons.html">
    <figure>
      <img src="chameleons_icon.png">
      <figcaption>Chameleons</figcaption>
    </figure>
  </a>
</li>

For the sake of validation, should I just use alt="" or should I use background images?

验证器无法告诉您空 alt 属性是否合适；它只能告诉您是否遗漏了该上下文中所需的 alt 属性。

所以这归结为您的内容的性质，甚至是个人喜好。如果图像是您内容的重要组成部分，强烈建议将图像包含在标记中； background-image 用于装饰视觉效果。但这真的取决于你。

为标记的图标图像提供替代文本是否有意义？

Does it make sense to provide alt text for labelled icon images?

html

accessibility

screen-readers