Question

我们的网站当前具有一个组件，该组件是通过使用<a>标签以及通过使用设置的“背景”图片实现的

a.class-name::after {
    content: url('image.png');
}

标签本身没有内容（看起来像<a class="class-name" other-attrs></a>）。我的问题是，我们需要在此链接中添加等效文本。由于锚标记不支持alt属性，因此我想到了两个选择：

将替代文本放入标签中，然后设置样式，以使文本不会显示。问题是我不确定屏幕阅读器会拾取它，因为它可能检测到它是不可见的。
将替代文本放在标签的title属性中。尽管屏幕阅读器通常会忽略title，但我读到here时说：“将读取title属性的唯一非常小的例外是，如果绝对没有链接锚文本，这种情况很少见。”对于我们来说，确实是这种情况，但我想与更多知识渊博的人再次确认这确实可行。

也许还有更好的第三种选择？无论如何，我们将不胜感激！

Answer 1

如果您有内容图片，请使用内容图片：

<a ...><img src="image.png" alt="..."></a>

为背景保留背景图像。

Answer 2

您可以在<span>内添加一个<a>标签：

<a href=""><span class="sr-only sr-only-focusable">alt text</span></a>

类的CSS：

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

以上样式取自Bootstrap。您也可以寻找H5BP或WordPress来查看它们的方法，总体上它们都非常相似。

然后照常应用其他样式。但我建议对伪元素使用background，因为您将无法使用content: url()控制图片大小。

Answer 3

保持简单。只需将aria-label属性添加到锚点即可。

<a class="class-name" aria-label="text you want read by screen reader"></a>

空锚标签为A11y

3 个答案: