Html A11y为空锚定标签

我们的网站目前有一个组件，它是通过使用

实现的，“标题属性将被读取的唯一一个非常小的例外是如果绝对没有链接锚文本，这是罕见的”。对我们来说，情况正是如此，但我想与更多知识渊博的人再次确认，这确实会起作用
也许还有更好的第三种选择？无论如何，任何帮助都将不胜感激
 如果您有内容图像，请使用内容图像：

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



保留背景图像作为背景。
您可以在
内添加
标记：

上面的样式取自Bootstrap。您还可以查找H5BP或WordPress，看看它们的方法是什么，通常都非常相似

然后像平常一样应用其他样式。但是我建议在伪元素上使用
background
，因为使用
content:url（）
无法控制图像大小。只需向锚添加一个属性

@CBroe谢谢！那正是我要找的！问题是我希望在悬停事件中更改图像。当图像由CSS属性设置时，执行此操作要容易得多。
span.sr only
方法足以提供满足WCAG 1.1.1非文本内容的文本替代方案。
.sr only focusable
类不必满足WCAG 1.1.1非文本内容。该类的主要用途是完全不可见的链接（没有图像），例如有视力的键盘用户所依赖的“跳到主要内容”链接。在@Stickers answer中，它是一个可操作键盘的工具提示，而不是一个图像文本替代品。你并不总是需要两种行为。
<a ...><img src="image.png" alt="..."></a>

<a href=""><span class="sr-only sr-only-focusable">alt text</span></a>

.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;
}