Question

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

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

Answer 1

虽然大多数时候背景图片都是纯装饰性的（因此，无需将图片展示给屏幕阅读器），但在某些情况下，开发人员可能会使用background-image而不是{{1 }}出于某种原因，保留了常规图像的语义，并将其公开给屏幕阅读器（因为该图像在上下文中很重要）。

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

title

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

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

Answer 2

如果您要将图片作为背景，以便利用background-size按比例缩放图片以适合或填充它的容器，则可以同时使用img和background-image img正如我在此处所述：How to add alt text to background images? Making background images accessible。

正如其他人所指出的，如果图片的内容对文档很重要，那么您一定要使用带有alt描述的background-image标记。但是没有理由你也不能同时装饰https://api.blockchain.info/customer/signup。

Answer 3

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

From WCAG2.0

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

Answer 4

避免使用除装饰之外的任何背景图像。因此，请避免背景图像中的文字或图像中的其他含义。

Image Sprites

Notes on accessible CSS image sprites：

在附加CSS背景图片的元素中包含替代文字。

如果启用了图像并且未启用Windows高对比度模式，请使用Javascript添加样式表，该样式表可视地隐藏文本替代，但仍可用于辅助技术。

使用JavaScript检测图像何时被禁用，并删除文本替代的CSS视觉隐藏显示状态。

使用JavaScript检测何时启用Windows高对比度模式，并删除文本替代的CSS视觉隐藏显示状态。

Windows高对比度模式

有趣的是，有一个Windows High Contrast Mode media query

Ñ(arg)

离屏技术

当您需要向屏幕阅读器用户提供要宣布的信息时，请使用此选项。将您想要的内容放入容器中，然后应用此类：

@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'); }
}

这对使用Windows高对比度模式且没有屏幕阅读器的IE（或旧版Edge）上的用户没有帮助，所以我再次回到上一节。

<强>表情符号

是的。表情符号。 Consider this technique用于与文本内容内联的非文本内容（如表情符号或图标字体）。

如何使背景图像可访问？

4 个答案: