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

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

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 用于视觉装饰。但这真的取决于你。