A11y 用于空锚标签

Question

我们的站点目前有一个组件，该组件是通过使用 <a> 标记和 "background" 图像实现的，图像是使用

设置的

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

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

将 alt-text 放入标签内，然后对其设置样式，使文本不显示。问题是我不确定它是否会被屏幕拾取 reader，因为它可能检测到它是不可见的。
将替代文本放入标签的 title 属性中。虽然 title 通常被屏幕 reader 忽略，但我读 here 那 "the only very tiny exception a title attribute will be read is if there’s absolutely no link anchor text, and that’s rare"。对我们来说，正是这种情况，但我想与更多知识渊博的人仔细核实这是否真的有效。

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

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>

A11y 用于空锚标签

A11y for empty anchor tag

html

css

anchor

accessibility