HTML and CSS Reference
In-Depth Information
Multiple images
If you need to reference multiple text alternative sources for an image to make sense
and all of that content is on the same web page, use the ARIA
aria-labelledby
or
aria-
describedby
attributes to reference the text alternatives, as these ARIA attributes can
accept multiple references.
In this example, the
aria-describedby
attributes in the
img
element reference its asso-
ciated values to
id
attributes in the descriptive
h1
and
p
elements:
<h1
id="johnny1
">Johnny throwing cake at his Mom while Dad ducks behind her</h1>
<p
id=
"
johnny2"
>Johnny's poor Mom is smeared with cake. Well, that shirt is
ruined!</p>
...
<img src="johnny_1st_bd.jpg"
aria-describedby="johnny1 johnny2"
alt="Johnny's
first birthday party">
Until user agents and assistive technologies better support
figure
and
figcaption
ele-
ments, use the
aria-labelledby
attribute to associate an image enclosed in the
figure
element with its caption.
Add the
aria-labelledby
attribute to the
img
element and add its associated value to
an
id
attribute of the
figcaption
element:
<figure>
<img src="ceremony_photo.jpg"
aria-labelledby="figcaption123"
>
<figcaption
id="figcaption123"
>
Opening ceremony for the new library building at the state university.
</figcaption>
</figure>
Discussion
A text alternative for a nontext element such as an image is not necessarily a
descrip-
tion
. Instead, a text alternative should strive to serve the same purpose and present the
same information, serving as a replacement for the nontext element.
Providing a text alternative for nontext elements is required to comply with WCAG
2.0. However, at the time of writing, the
alt
attribute is not technically required in
HTML5.
Regardless, it's recommended to use the
alt
attribute whenever possible for images.
Any decision to remove it, make it a null value, or use another method of providing
text alternatives must be a conscious and carefully considered one.
Apply these best practices when writing the text alternatives for images:
• Include all content (text) that appears in the image.
• Consider the context of the image to help determine what is important about it.
• If it is relevant, convey the purpose or function of the image.
• Avoid including information that is available as text near the image.
