A11y 表示空锚标记

Question

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

\n\n

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

\n\n

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

\n\n

\n
1. 将替代文本放入标记内，然后设置其样式，以便文本不显示。问题是我不确定屏幕阅读器是否会识别它，因为它可能会检测到它是不可见的。
\n
2. 将替代文本放入title标签的属性中。尽管title通常会被屏幕阅读器忽略，但我在这里读到“将读取标题属性的唯一非常微小的例外是如果\xe2\x80\x99s绝对没有链接锚文本，并且\xe2\x80\x99s很少见”。对于我们来说，这恰恰是如此，但我想与更有知识的人再次确认这是否真的有效。
\n

\n\n

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

\n

Answer 1

把事情简单化。aria-label只需向锚点添加一个属性即可。

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