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

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

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

您的用例似乎是“一些周围文本的图形表示”。这是规范所说的：

在许多情况下，图像实际上只是补充，它的存在只是加强了周围的文字。在这些情况下，alt属性必须存在，但其值必须是空字符串。

一般来说，如果删除图像不会使页面变得不那么有用，则图像属于这一类，但是包含图像会使视觉浏览器的用户更容易理解这个概念。

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

为了验证，我应该只使用alt=""还是应该使用背景图像？

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

因此，这取决于您的内容的性质，甚至是个人喜好。如果图像是您内容的一个有意义的部分，强烈建议将图像包含在标记中；background-image用于装饰视觉效果。但这真的取决于你。