一位客户询问如何解决他们的背景图像没有 alt 属性的问题，作为回应，我建议我们可能需要做的是支持这些部分的 IMG 咏叹调角色。
我维护了一个拖放构建器产品，因此当我实现它时，最终用户应该清楚何时为部分提供 ARIA img 角色和描述性标签。
我知道一般的想法是在背景图像不纯粹是装饰性的情况下对其进行描述。背景图像通常是与内容相关的东西，也是装饰性的。您何时认为向带有背景图像的页面部分添加可访问的上下文丰富是有用的？
以下是我所说的页面部分的一些示例： https://demo.sooperthemes.com/glazed-main/sections-and-backgrounds
我还担心的是，如果一个部分包含一堆文本和一个号召性用语，如果该部分被标记为“img”，是否会混淆屏幕阅读器用户。
如果该部分的目标是让用户注册某些活动，这是否意味着我不能使用 ARIA img 角色来描述该部分的背景图像？那我还剩下什么设备来描述背景图片呢？
【问题讨论】：
标签： accessibility
将 ARIA 角色添加到具有背景图像的 div 通常不是一个好习惯。如果图像需要文字描述，更合适的做法是使用带有 alt 属性的原生 HTML <img> 元素。
因此，建议内容作者和开发者仅在无法使用原生元素时才使用背景图片来呈现信息。
https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage
作为一般规则，如果没有图片内容就有意义，或者如果图片不能传达可操作的信息，那么图片可能是装饰性的。背景图片不需要有文字描述，因为它们是背景的一部分，而不是前景。
W3C 对what is a decorative image 提供了一些指导。
我在提供的示例中没有看到任何需要描述任何背景图像的内容。
【讨论】：
ARIA 没有得到很好的支持。您不能将替代文本分配给 CSS 背景图像。也就是说，您可以将它们放在<span class="visually-hidden">Photo of a dog on a picnic table.</span> 中，这应该会使文本在 Drupal 8 站点中不可见。如果您不使用 Drupal，情况会更加复杂。
【讨论】：
切勿在包含嵌套内容的部分上以这种方式使用role="img"。
我假设您描述的结构与此类似：
<div id="fooSection" role="img" aria-label="foo" style="background-image: foo.jpg">
<h2>My heading</h2>
<p>Some more text</p>
<a href="foo.html">Call to action</a>
<div>
我还担心的是，如果某个部分包含一堆文本和号召性用语，如果该部分被标记为“img”，是否会使屏幕阅读器用户感到困惑。
效果实际上远比这严重。嵌套内容根本不会传达给辅助技术。在此示例中，屏幕阅读器用户将不知道标题、段落和链接。他们也将无法使用该链接。
原因是ARIA img role 被定义为具有presentational children，这意味着后代不会暴露在可访问性树中。此外，img 角色不支持generating an accessible name from contents，因此获取图像文本替代的唯一方法是使用aria-label 或aria-labelledby。
如果您无法避免使用 CSS 背景图片，则可以使用 <span role="img" aria-label="foo"> 作为嵌套在该部分中的虚假图片元素。
<div id="fooSection" style="background-image: foo.jpg">
<!-- Text alternative for the background image on div#fooSection -->
<span role="img" aria-label="foo"></span>
<h2>My heading</h2>
<p>Some more text</p>
<a href="foo.html">Call to action</a>
<div>
在这里，我将假图像跨度放置为带有背景图像的 DIV 的第一个子元素。你在这方面有一些灵活性；如果出现在标题之后，假图像可能更有意义。此技术记录在 Using ARIA: What If the Author Has to Have a CSS Image on a <div> that Contains Content? 中，但需要注意的是 HTML <img> 是首选。
您认为何时将可访问的上下文丰富添加到具有背景图像的页面部分是有用的？
大多数时候，您会希望将图像传达给每个人。
【讨论】：