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

问题

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:

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

Thanks in advance for any insight into these questions!

回答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.

回答2:

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

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

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).

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.

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.

回答3:

The simplest approach is to have alt= on the <img>. Not only is that the established practice for accessible images but it also satisfies accessibility checker tools such as the wave chrome extension from webaim or axe from deque.

If you decide to use title= on the <div>, that's perfectly acceptable and is accessible but if you plan on running any accessiblity tools on your page, it'll fail because the image doesn't have an alt tag. You'd need a blank alt=' ' on the <img> tag.

来源：https://stackoverflow.com/questions/40555111/what-is-the-best-way-to-use-a-background-image-on-a-div-yet-remain-accessible

标签

html

accessibility

wai-aria