html - A11y 用于空锚标签

Question

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

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

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

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

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

标签： htmlcssaccessibilityanchor

Answer 1

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

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

为背景留下背景图像。