A11y为空锚标签

Question

我们的网站目前有一个组件，它是通过使用带有“背景”图像的<a>标签实现的

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

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

1. 将alt-text放在标记内，然后设置样式以使文本不显示。 问题是我不确定这会被屏幕阅读器拾取，因为它可能会检测到它是不可见的。
2. 将alt-text放在标记的title属性中。 虽然屏幕阅读器通常会忽略title ，但我在这里读到“标题属性将被读取的唯一非常小的例外是，如果绝对没有链接锚文本，那很少见”。 对我们来说，情况确实如此，但我想与更多知识渊博的人仔细检查，这确实可行。

也许还有更好的第三种选择？ 在任何情况下，任何帮助将非常感谢！

Answer 1

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

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

离开背景图像背景 。

Answer 2

您可以在<a>添加<span>标记：

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