Question

我已经构建了一个使用div的图片库，其中包含size设置为cover的背景图片，但我担心可访问性。

我的问题如下：

我可以使用title上的div属性代替alt-text代码中的img属性吗？
将figcaption元素作为兄弟添加到div，并将figure元素嵌套在一起帮助访问？
我可以在aria-labeledby上使用div吗？
我是否应该将文字注入div？

提前感谢您对这些问题的任何见解！

Answer 1

您正在使用div来显示图片，然后您不使用原生元素。

您必须定义ARIA role=img以指定这是一张图片：

为了能够感知角色为img的元素，作者必须提供替代文本或由accessible name calculation确定的标签。

所以最好的办法是：

<div role="img"
     aria-label="Description of the image"
     title="Tooltip for users not using assistive technologies" />

请注意，由于屏幕阅读器并不总是使用title属性，因此最好使用aria-label。

Answer 2

首先回答您的问题，并在最后找到可能的解决方案：

我可以使用title上的div属性代替alt - img标签上的文字属性吗？

没有。或者，更准确地说，你可以做到这一点，但几乎没有支持。由于div是非交互式的，也不是一个里程碑，因此屏幕阅读器没有理由让它集中注意力并找到title。此外，对title的屏幕阅读器支持很差和/或不一致。我建议您查看PowerMapper维护的列表（截至2016年10月16日的最后更新时间）：A "click here" link with TITLE attribute

将figcaption元素作为兄弟添加到div，并将figure元素嵌套在一起帮助访问？

没有。屏幕阅读器对figcaption不执行任何操作（因为浏览器不会以任何有意义的方式将其公开给SR）。

我可以在div上使用aria-labeledby吗？

没有。属性aria-labelledby（两个“L”）用于交互式内容或地标或类似物。由于div是非交互式的，也不是一个里程碑，因此屏幕阅读器没有理由让它专注并找到aria-labelledby。

我是否应该将文本注入div？

是

八九不离十。

考虑一种用于图像描述的离屏技术，例如：

<div>
 <p class="SRonly">
  Cemetery with a lone beam of sunlight shining on a Port-A-John.
 </p>
</div>

CSS可能看起来像这样（也就是RTL语言）：

.SRonly {
  position: absolute !important;
  clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
  clip: rect(1px, 1px, 1px, 1px);
  top: auto;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

html[dir=rtl] .SRonly {
  left: inherit;
  left: unset;
  right: -9999px;
}

这样＆＃34;图像替代＆＃34;只是当屏幕阅读器正常遍历页面时将读取的流内容。它将被视力正常的用户隐藏。它将使使用屏幕阅读器的低视力用户受益。对于使用屏幕阅读器的键盘用户来说，它不会成为障碍。

没有ARIA技巧，没有为了满足验证者而混淆HTML，没有添加可能会降低视力用户可用性的属性。

您可以在Bootstrap和其他库中看到.sr-only。我故意让我的示例类名不同。

现在，正如所说的那样，如果您只是编写Codepen并链接它，我们可以非常轻松地测试它。

Answer 3

最简单的方法是在＆lt; img＆gt;上使用alt =。这不仅是可访问图像的既定惯例，而且还满足可访问性检查工具，例如来自webaim的wave chrome extension或来自deque的axe。

如果你决定在＆lt; div＆gt;上使用title =，这是完全可以接受的并且可以访问，但是如果你计划在你的页面上运行任何accessiblity工具，那么它会失败，因为图像没有＆＃39; t有一个alt标签。你需要一个空白的alt =＆＃39; ＆＃39;在＆lt; img＆gt;上标签

在div上使用背景图像的最佳方法是什么仍然可以访问？

3 个答案: