Question

我正在尝试让我的网站更容易被残障用户访问，我一直在研究如何为图标添加替代文字。我正在使用Font Awesome图标并且图标充当链接，文档建议我在其周围添加标题链接到锚标记，如下所示：

<a href="path/to/shopping/cart" title="View 3 items in your shopping cart">
  <i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>

然而，它似乎不适用于Apple的VoiceOver。它仍然只是读出“访问链接[？]”。有没有人有这方面的经验？

谢谢！

Answer 1

您必须与title属性一起使用aria-label属性。

title属性并非始终通过辅助技术读取，但aria-label应该是。

不幸的是，单独使用aria-label对没有使用屏幕阅读器的用户没有任何帮助，而title属性会给他们提供线索。

Answer 2

如果图标是内容（如果它正在传达信息，并且您没有其他文本已经传达了该信息），那么用于表示它的元素不是斜体元素，而是{ {1}}元素，支持<img>属性。

Answer 3

您正在寻找使用aria-label属性。

<a href="path/to/shopping/cart" aria-label="View 3 items in your shopping cart">
    <i class="fa fa-shopping-cart" aria-hidden="true"></i>
</a>

我还推荐这两篇文章，以进一步理解为什么title属性被广泛误解，以及为什么它不会像你认为的那样表现。

http://mrwweb.com/the-title-attribute-and-why-its-almost-useless/

https://devbook.com/title-attribute-truth/

Answer 4

您可以通过两种方式在此处添加一些内容。

第一种是使用具有适当img属性值的alt元素，例如

<a href="path/to/shopping/cart" >
    <img src="url/source.jpg" alt="View 3 items in your shopping card" />
</a>

第二种方法是将一些文本添加到i元素中并明显隐藏它：

<a href="path/to/shopping/cart">
    <i class="fa fa-shopping-cart" aria-hidden="true">
      <span class="sr-only">
         View 3 items in your shopping cart
      </span>
    </i>
</a>

将.sr-only类添加到样式表中：

.sr-only {
  height: 1px;
  width: 1px;
  clip: rect(1px, 1px, 1px, 1px);
  overflow: hidden;
  position: absolute;
}

如果需要，第二种方法将允许更长的文本字符串。它还可以防止某些浏览器（Firefox，内存）上的怪癖，如果文本在屏幕外对齐并且是链接的一部分，则用户标记链接会将焦点扩展到文本所在的位置，这会导致很长时间，屏幕上的薄盒子。

.sr-only的工作原理是将内容设置为一个小的1px框，然后将其剪切掉，并且健壮性绝对定位在页面上。它受到所有现代浏览器的支持，对于不喜欢标准语法（clip: rect(1px 1px 1px 1px)）的旧版IE，只需要一个额外的剪辑规则。有关详细信息，请参阅Yahoo's developer blog。

至于哪个是个人偏好的问题。如果使用图标集，我会去.sr-only向页面添加有意义的文本。如果您想使用img元素，您需要确保在内容更新时内容作者写出有意义的内容而不是描述图像的外观。

向图标添加替代文本

4 个答案: