html - A11y 用于空 anchor 标签

Question

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

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

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

1. 将 alt-text 放在标签内，然后设置样式，使文本不显示。问题是我不确定它是否会被屏幕阅读器拾取，因为它可能会检测到它是不可见的。
2. 将替代文本放在 title 中标签的属性。虽然title通常被屏幕阅读器忽略，我读了here “唯一会读取 title 属性的非常小的异常(exception)是绝对没有链接 anchor 文本，这种情况很少见”。对我们来说，正是这种情况，但我想与更多知识渊博的人仔细核实这是否真的有效。

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

Answer 1

保持简单。只需添加 aria-label 属性给 anchor 。

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