Question

一位客户询问要解决其背景图片不具有alt属性的问题，作为回应，我建议我们可能需要做的就是在这些部分上支持IMG aria角色。

我维护一个拖放生成器产品，因此在实现此功能时，最终用户应该清楚地向一个节提供ARIA img角色和描述性标签。

我了解一般的想法是在不完全是装饰性的情况下描述背景图像。背景图片通常是与内容相关且具有装饰性的内容。您何时确定将可访问的上下文充实添加到具有背景图像的页面节中有用吗？

以下是一些我正在谈论的页面部分示例： https://demo.sooperthemes.com/glazed-main/sections-and-backgrounds

我还担心的是，如果某个部分包含大量文本和号召性用语，那么如果此部分标记为“ img”，则会使屏幕阅读器用户感到困惑。

如果本部分的目的是让用户注册某些活动，这是否意味着我不能使用ARIA img角色来描述本部分的背景图片？那剩下什么设备来描述背景图像呢？

Answer 1

通常，将ARIA角色添加到具有背景图片的div中不是一个好习惯。如果图像需要文字说明，则更合适的操作方法是使用具有<img>属性的本机HTML alt元素。

因此，建议内容作者和开发人员仅在无法使用本机元素时才使用背景图像来渲染信息。

https://www.w3.org/WAI/GL/wiki/ARIATechnique_usingImgRole_with_aria-label_forCSS-backgroundImage

通常，如果内容没有图像就有意义，或者图像不能传达可操作的信息，则图像可能是装饰性的。背景图片不需要具有文字说明，因为它们是背景的一部分，而不是前景的一部分。

W3C提供了有关what is a decorative image的一些指导。

在提供的示例中，我没有看到任何需要描述任何背景图像的东西。

Answer 2

ARIA只是没有得到很好的支持。您不能将替代文本分配给CSS背景图像。也就是说，您可以将它们放在<span class="visually-hidden">Photo of a dog on a picnic table.</span>中，这样可以使文本在Drupal 8网站中不可见。如果您不使用Drupal，则更为复杂。

Answer 3

在包含嵌套内容的部分上，切勿以这种方式使用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>是首选。

何时确定将可访问的上下文填充添加到具有背景图像的页面节中有用吗？

大多数时候，您会希望将图像传达给所有人。

如果图像对于全面理解内容必不可少，那么您必须提供替代文本。
在许多情况下，对于理解图像可能并不是真正意义上的 essential ，但仍然值得用文本替代。它可以是补充说明性材料，也可以是传达情绪或印象的东西。这里的关键是图像的选择是编辑决定。选择它来说些什么。因此，应该传达给所有人。
当心不要轻易将图像视为“装饰性”。暂停一下，以考虑它是否纯粹是装饰性的，或者它是否实际上符合先前的说明性类别，但不是必需的。我使用的一种技术是问：“如果用其他图像替换它是否重要？” （例如，用橡皮鸭替换跑车。）如果答案是肯定的，那么图像并非纯粹是装饰性的，值得用文字替代。

何时在带有背景图像的部分上使用ARIA IMG角色

3 个答案: