css - 如何使背景图像可访问？

Question

如果您使用内联 <img>标签有 alt=属性及其他aria-*可用于使图像易于访问的属性。

但是如果你使用的是 background-image: url(...) , 是否有关于如何使屏幕阅读器可以访问和友好地访问此容器的任何指南？您是否要向容器添加特定属性？

Answer 1

虽然大多数情况下背景图像纯粹是装饰性的(因此没有必要将图像暴露给屏幕阅读器)，但在某些情况下开发人员可能想要使用 background-image而不是 <img>出于某种原因并保留常规图像的语义，并将其显示给屏幕阅读器(因为图像在上下文中很重要)。

在这种情况下，您可以公开 background-image 的容器使用咏叹调 role="img" 带有描述性 aria-label (或者，使用 title 属性):

.important-image {
  background-image: url(...);
  ...
}

<div class="important-image" role="img" aria-label="{image description}"></div>

---

将来，CSS 有望提供替代文本，请参阅:https://www.w3.org/TR/css-content-3/#alt .