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."的用例。这是规范所说的内容：

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

一般情况下，如果删除图像不会使页面变得不那么有用，则图像属于此类别，但包含图像使得可视化浏览器的用户更容易理解该概念。

因此，alt属性可以（事实上，必须）在您的情况下为空，因为图像仅用于支持已经是主要内容的一部分的文本如你所说，重复内容将是不必要和突兀的：

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

您可以更进一步，使用figure和figcaption标记所有内容，完全不需要alt属性，因为然后通过{提供替代文字{1}}：

figcaption

为了验证，我应该使用<li> <a href="/chameleons.html"> <figure> <img src="chameleons_icon.png"> <figcaption>Chameleons</figcaption> </figure> </a> </li>还是应该使用背景图像？

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

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

Answer 2

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

属性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/。

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

2 个答案: