在div上使用背景图像但仍可访问的最佳方法是什么？ [英] What is the best way to use a background image on a div yet remain accessible?

问题描述

我建立了一个使用 div s的图像库，其中包含一个背景图像，该图像的 size 设置为封面，但我担心可访问性。

I've built an image gallery that uses divs that contains a background image whose size is set to cover, but I am concerned about accessibility.

我的问题如下：

1. 我可以在 div 上使用 title 属性吗代替 img 标记上的 alt-text 属性？


2. 将在 div 中添加 figcaption 元素作为同级元素，并将两者嵌套在 figure 元素有助于辅助功能？


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


4. 我也应该将文本注入 div 吗？

1. May I use the title attribute on a div in lieu of alt-text attribute on an img tag?
2. Would adding a figcaption element as a sibling to the div, and nesting both in a figure element help accessibility?
3. May I use aria-labeledby on the div?
4. Should I inject the text into the div as well?

感谢您对这些问题的深入了解！

Thanks in advance for any insight into these questions!

推荐答案

您正在使用 div 以显示图像，那么您无需使用本机元素。

You are using a div to show an image, then you do not use the native element.

您必须定义ARIA role = img 来指定这是一个图像：

You have to define an ARIA role=img to specify that this is an image:

为了使具有 img 作用的元素能够被感知必须提供由可访问名称计算确定的替代文本或标签。

In order for elements with a role of img be perceivable, authors MUST provide alternative text or a label determined by the accessible name calculation.

所以最好的方法是：

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

请注意，由于屏幕阅读器并不总是使用标题属性，最好使用 aria标签。

Note that, as screenreaders do not always use the title attribute, it's preferable to use the aria-label.

这篇关于在div上使用背景图像但仍可访问的最佳方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！