包含和不包含链接和辅助功能的CSS背景图片

时间:2017-04-05 14:03:18

标签: accessibility wai-aria screen-readers wcag

我在div容器中使用带有css(背景图像)的图像。不只是为了介绍,它们有意义。我想为残疾用户提供替代方案,但不确定如何做到这一点。我有时也会在链接中使用它们,这也需要以某种方式解决。

对于案例一(div里面的图片有css,但没有链接),我想在div里面使用隐藏文字,但不确定我是否应该指定这是图像而不是只是一个文字。因为当为图像提供文本替代时,禁用的用户会看到此文本属于图像(例如aria-labelledby),那么如何使用div和css图像完成此操作?

对于第二种情况,我也不确定如何做对。我想使用title作为链接,因此普通用户也可以通过将鼠标悬停在图标上来从中受益,但是我不确定title是否足以用于禁用人

1 个答案:

答案 0 :(得分:0)

这显然是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>