Skip to content

Using <figcaption> for Image Descriptions

Both ALT text and the <figcaption> element enhance image accessibility but require different writing styles. Let's look at the less familiar <figure> and <figcaption> elements to help clarify that requirement.

What is <figcaption>?

The <figcaption> element in HTML provides a caption or description for a <figure> element. And because a <figure> element can contain different media types (images, tables, text, block quotes, code samples, etc.), the <figcaption> element will label that media correctly. For example, a <figure> element that contains a block quote can use the <figcaption> to attribute the quote.

The primary difference between <figcaption> and ALT text is that <figcaption> is visible on the screen by default, while ALT text is exposed by screen readers and only visible on the screen if the image link is broken. 

How is <figcaption> used?

When used with images, <figcaption> provides context and descriptive information about the image, whereas the ALT attribute should be concise and describe the image itself. In other words, "alt descriptions should be functional; figcaption descriptions should be editorial or illustrative." ~ Alt vs Figcaption, thoughtbot. For example, in the code below, notice that the ALT attribute describes what’s in the photo, and the <figcaption> gives details that provide deeper context and background information.

A bald eagle perched on an old Oak tree.
The bald eagle has officially been designated as the national bird of the United States. On Christmas Eve 2024, President Joe Biden signed into law a bill amending Title 36 of the United States Code to declare the bird’s status. From the article titled "It's official: The bald eagle is the national bird of the United States," earth.com

The code for the above photo and caption looks like this:

<figure>

<img src="baldeagle.jpg" alt="A bald eagle perched on an old Oak tree.">

<figcaption>The bald eagle has officially been designated as the national bird of the United States. On Christmas Eve 2024, President Joe Biden signed into law a bill amending Title 36 of the United States Code to declare the bird’s status. From the article titled "It's official: The bald eagle is the national bird of the United States," earth.com</figcaption>

</figure>

If <figcaption> contains all the relevant information needed to describe an image adequately, then ALT text may not be needed. For example, if you publish an image of a blue Chevrolet Camero with a <figcaption> that reads "My father’s 1966 blue Chevy Camero with gold hubcaps. He kept it in the garage and only drove it to church." you probably don’t need ALT text as "blue Chevy Camaro with gold hubcaps" explains exactly what’s in the image.

When to Use <figcaption>

Use <figure> and <figcaption> when you want to provide additional context to the image, like historical significance, special circumstances, photo credits, etc., and enhance the visual presentation.

A couple of things to remember when deciding to use <figure> and <figcaption> vs ALT text. 

  • <figcaption> was introduced in HTML5, and some older browsers may not support it. ALT tag is a more robust option as it is much more widely supported.
  • If using the <figure> element, a <figcaption> is not required. But you can not use <figcaption> without a <figure> parent element.

Even though <figcaption> and ALT text provide context for images and necessary accessibility, they have distinct purposes. And using <figcaption> does not automatically mean you don't use ALT text. Both elements can work together to provide a more robust and accessible user experience.

Resources

Maggie Vaughan, CPACC
Content Marketing Practitioner
DubBot