I've built an image gallery that uses div
s 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 adiv
in lieu ofalt-text
attribute on animg
tag? - Would adding a
figcaption
element as a sibling to thediv
, and nesting both in afigure
element help accessibility? - May I use
aria-labeledby
on thediv
? - Should I inject the text into the
div
as well?
Thanks in advance for any insight into these questions!
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
.
Answers to your questions first, with potential solution at the end:
- May I use the
title
attribute on adiv
in lieu ofalt
-text attribute on animg
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 thediv
, and nesting both in afigure
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.
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