如何使背景图像可访问？

Question

如果使用内联<img>标签，则可以使用alt=属性和其他aria-*属性来使图像可访问。

但是，如果您使用background-image: url(...)，是否有任何有关如何使此容器对屏幕阅读器友好和友好的准则？是否有要添加到容器的特定属性？

Answer 1

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

在这种情况下，您可以background-image使用role="img"描述性aria-label（或者，使用title属性）公开using ARIA的容器：

.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。

Answer 2

背景图像旨在用于装饰目的，它们不需要文本替代

从 WCAG2.0

当图像用于装饰、间距或其他目的而不是页面中有意义的内容的一部分时，图像就没有意义，应该被辅助技术忽略。

Answer 3

如果您将图像设为背景，以便按background-size比例缩放图像以适合或填充其容器，则可以同时使用 和 ，img如background-image我在此处所述：如何将替代文本添加到背景图像？使背景图像易于访问。

正如其他人指出的那样，如果图像的内容对文档很重要，那么您绝对应该使用img带有alt描述的标签。但您没有理由不能同时用作background-image装饰性用途。

Answer 4

避免使用非装饰性的背景图像。因此，请避免在背景图像中出现文本或图像中存在其他含义。

图像精灵

关于可访问的 CSS 图像精灵的注释：

• 在 CSS 背景图像附加到的元素内包含替代文本。
• 如果启用了图像并且未启用 Windows 高对比度模式，请使用 Javascript 添加样式表，该样式表在视觉上隐藏文本替代项，但仍可用于辅助技术。
• 使用 JavaScript 检测图像何时被禁用，并删除 CSS 视觉上隐藏的文本替代显示状态。
• 使用 JavaScript 检测何时启用 Windows 高对比度模式，并删除替代文本的 CSS 视觉隐藏显示状态。

Windows 高对比度模式

有趣的是，有一个Windows 高对比度模式媒体查询

@media screen and (-ms-high-contrast: active) {/* All high contrast styling rules */}
@media screen and (-ms-high-contrast: black-on-white) {
    div { background-image: url('image-bw.png'); }
}
@media screen and (-ms-high-contrast: white-on-black) {
    div { background-image: url('image-wb.png'); }
}

离屏技术

当您需要包含想要向屏幕阅读器用户宣布的信息时，请使用此选项。将你想要的内容放入带有背景图片的容器中，然后应用这个类：

.visually-hidden {
position: absolute !important;
clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
clip: rect(1px, 1px, 1px, 1px);
padding:0 !important;
border:0 !important;
height: 1px !important;
width: 1px !important;
overflow: hidden;
}

这对使用 Windows 高对比度模式且没有屏幕阅读器的 IE（或旧版 Edge）用户没有帮助，因此我建议您返回上一节。

表情符号

是的。表情符号。对于与文本内容内联的非文本内容（例如表情符号或图标字体），请考虑使用此技术。