HTML and CSS Reference
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
<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:
<img src="ceremony_photo.jpg" aria-labelledby="figcaption123" >
<figcaption id="figcaption123" >
Opening ceremony for the new library building at the state university.
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
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.