What is the best way to use a background image on a div yet remain accessible?

Question

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.

My questions are as follows:

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!

Answer 1

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

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

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.

So the best way is to do:

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

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

Answer 2

Answers to your questions first, with potential solution at the end:

1. May I use the title attribute on a div in lieu of alt-text attribute on an img tag?

No. Or, more accurately, you could do that but would have little support. Since the div is non-interactive nor is it a landmark, there is no reason for the screen reader to give it focus and find the title. Further, screen reader support for title is poor and/or inconsistent. I recommend you look at the list PowerMapper maintains (last updated as of this writing on 16 October 2016): A "click here" link with TITLE attribute

2. Would adding a figcaption element as a sibling to the div, and nesting both in a figure element help accessibility?

No. Screen readers do nothing with the figcaption (since browsers do not expose it to SR in any meaningful way).

3. May I use aria-labeledby on the div?

No. The attribute aria-labelledby (two “L”s) is meant for interactive content or landmarks or similar. Since the div is non-interactive nor is it a landmark, there is no reason for the screen reader to give it focus and find the aria-labelledby.

4. Should I inject the text into the div as well?

Yes.

Sorta.

Consider an off-screen technique for the image description, such as this one:

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

The CSS might look like this (accounting for RTL languages too):

.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;
}

This way the "image alternative" is just flow content that will be read as the screen reader normally traverses the page. It will be hidden from sighted users. It will benefit low vision users who use a screen reader. It will not be a barrier for keyboard users who use a screen reader.

No ARIA trickery, no bastardization of your HTML to satisfy a validator, no addition of attributes that potentially reduce usability for sighted users.

You may see this in Bootstrap and other libraries as .sr-only. I intentionally made my example class name different.

Now, all that being said, we can test this pretty easily if you just make a Codepen and link it.