带有和不带有链接和可访问性的 CSS 背景图像

Question

我在 div 容器中使用带有 css（背景图像）的图像。不只是为了展示，它们是有意义的。我想为残障用户提供替代方案，但不确定如何正确执行此操作。我有时也会在链接中使用它们，这也需要以某种方式解决。

对于第一种情况（div 内的图像带有 css，但没有链接），我想在 div 内使用隐藏文本，但不确定我是否应该指定这是图像而不仅仅是文本。因为当为图像提供文本替代时，禁用用户会看到该文本属于图像（例如aria-labelledby），那么div和css图像应该如何处理？

对于第二种情况，我也不知道如何使它正确。我想将title 用于链接，因此普通用户也可以通过将鼠标悬停在图标上来从中受益，但我不确定title 是否足以满足残疾人的需求。

Answer 1

这显然是 role=img 的用途：

<a href="...">
  <div role="img" class="css_classename"
       aria-label="This information is provided to a screen reader"
       title="This is a tooltip">
  </div>
</a>