Alt vs Figcaption

When we boil it all down, websites are really just a series of words and pictures. It’s a way for a person (or sometimes a robot, or sometimes a robot in a person trenchcoat) to tell you about a thing and you, a visitor to their internet page, to consume that thing in whatever form.

Sometimes that form is purely visual. An image.

For that we have the img element. Its sole requirement is the src attribute to direct your browser where to locate your image. And voilà! Visual splendor.

Images, however, have one more thing to consider: Assistive technologies need words to interpret an image. People sometimes need words to better understand why an image is being displayed.

Luckily we have a few ways to describe them in a human readable manner: alt and figcaption. These items house very different writing patterns though, and can be used both together and apart, depending on the conditions.

The alt attribute

The alt attribute is an internet veteran, introduced in HTML 2 in 1995. Its most well-known use is as an alternative descriptor for img tags, but it can also be used in a similar manner with the area and input (if the input type is an image) tags.

This attribute allows you to provide a written equivalent of what appears in an image and is useful for a variety of scenarios:

• Visitors who use screen readers are able to understand what the images are displaying.
• If a visitor is unable to or chooses not to load your images, the description will appear on the screen in lieu of your image.
• It serves as a way to better index your site for improved search engine optimization (SEO).

<img 
  src="dog.jpg"
  alt="A small black and white dog sitting and looking to the side.">

All img elements should use an alt description. If one isn’t provided, a screen reader may announce the image file itself, which becomes audio clutter (especially if many images appear).

If an image is purely decorative (such as a border, flourish, texture), you can set an empty string (null) for the alt attribute, which will tell screen readers to ignore the element. When using a nulled alt, avoid adding a space character in between the string (like this: " ") as a screen reader may still announce the image.

<img
  src="wavy-border.png"
  alt="">

Keep in mind that your judgment of whether or not an image is decorative is subjective. Some people who use screen readers can still, well, see and perceive visual content, and may be wondering why their assistive technology is skipping over an image in the document.

The figcaption element

The figcaption element is a more recent addition and was introduced in HTML5 in 2014. It comes with a parent figure element which can describe a variety of media and text, such as photos, videos, illustrations, diagrams and charts, quotes, poems, code snippets, etc. These items are usually related to the main body of text and further illustrate an idea. A figcaption is not required to be in every figure element, but a figcaption always needs a figure parent.

The figcaption element does just what its name suggests: provides a caption for a figure. Unlike the alt attribute, the figcaption element is visible on a browser screen by default. Much like the figure element can house different media, the figcaption can label that media accordingly.

• For a blockquote it can be used to attribute the quote.
• For a poem, it can be used to cite a source.
• For images, it can serve as a caption.

<figure>
  <img
    src="llama.jpg"
    alt="A closeup of a llama's face looking off to the side on a mountain.">
  <figcaption>
  Martha is one of the many domesticated llamas that roam freely around the grounds of Machu Picchu.
  </figcaption>
</figure>

A figcaption can also describe multiple images within a figure.

<figure>
  <img 
    src="mountain.jpg"
    alt="The side of a mountain with a waterfall running down it.">
  <img
    src="donkey.jpg"
    alt="A brown donkey carrying 4 red wooden beams on its back.">
  <img
    src="climber.jpg"
    alt="A man in a blue jacket and hiking gear looking to the side while standing on a mountain path.">
  <figcaption>
  A few photos from my hike along the Inca Trail in Peru in <time datetime="2018-10">October 2018</time>.
  </figcaption>
</figure>

Because a figcaption is a block-level element, it can include other inline elements to better inform visitors:

• Links to other websites can direct a visitor to learn more about your description.
• The small element can be used to describe copyright or other accompanying legalese.
• The cite element can reference a title of work (e.g. <cite>The Mona Lisa</cite>)
• The time element can label when an image was created.

Writing for alt and figcaption

While both the alt attribute and the figcaption element provide a way to describe images, the way we write for them is different. alt descriptions should be functional; figcaption descriptions should be editorial or illustrative.

Functional descriptions

A functional description explains exactly what is in an image. These descriptions should be thorough but brief.

<img
  src="butterfly.jpg"
  alt="A blue butterfly sitting on an orange flower.">

Functional descriptions don’t necessarily have to be literal; they can express what an image represents.

<img
  src="pencil.svg"
  alt="Edit text.">

Editorial descriptions

Editorial or illustrative descriptions can convey the who, what, when, where, and/or why of an image, contextualizing it alongside other content on the page. This may be information that isn’t apparent from just looking at the image.

<figure>
  <img
    src="high-five.jpg"
    alt="Two people high-fiving mid-air.">
  <figcaption>
  Senior developer, Steph Viccari (brown shirt and olive pants), and 
  Chief Marketing Officer, Lindsey Christensen (blue shirt and jeans) 
  are excited to announce they'll be new respective hosts on the 
  <a href="https://www.bikeshed.fm/">Bikeshed</a> and 
  <a href="https://www.giantrobots.fm/">Giant Robots</a> podcasts.
  </figcaption>
</figure>

Putting it all together

Can alt and figcaption live together in harmony? Why yes, yes they can. In this example, we’re using an image figure within an article about pair-programming at thoughtbot.

Here’s our photo:

The functional description:

A woman holding an oversized plush duck sits at a desk in an office, looking at a laptop.

The editorial description:

Eunjee Yoon, People Operations Specialist at thoughtbot, explains her code to a plush (not rubber, in this case) duck after finishing an Intro to HTML course.

What it looks like in code:

<figure>
  <img
    src="eunjee-pair.jpg"
    alt="A woman holding an oversized plush duck sits at a desk in an office, looking at a laptop.">
  <figcaption>
  Eunjee Yoon, People Operations Specialist at thoughtbot, explains her code to a 
  plush (<a href="https://en.wikipedia.org/wiki/Rubber_duck_debugging">not rubber, in this case</a>) 
  duck after finishing an Intro to HTML course.
  </figcaption>
</figure>

Further compatibility tweaks

Although the figcaption is a nice semantic way to provide extra information about an image or any other type of accompanying content, it should be noted that some screen readers may have trouble announcing a figcaption in the expected manner. Scott O'Hara, an accessibility engineer, suggests adding a role and an aria-label to a figure that repeats the raw text within the figcaption.

Our code with this addition:

<figure
  role="figure"
  aria-label="Eunjee Yoon, People Operations Specialist at thoughtbot, 
  explains her code to a plush, not rubber, in this case, duck after 
  finishing an Intro to HTML course.">
  <img
    src="eunjee-pair.jpg"
    alt="A woman holding an oversized plush duck sits at a desk in an office, looking at a laptop.">
  <figcaption>
  Eunjee Yoon, People Operations Specialist at thoughtbot, explains her code to a plush 
  (<a href="https://en.wikipedia.org/wiki/Rubber_duck_debugging">not rubber, in this case</a>) 
  duck after finishing an Intro to HTML course.
  </figcaption>
</figure>

What not to do

As you embark on your journey to appropriately describe all your images, be wary of a few no-no’s:

• Don’t use the exact same words for both an alt and a figcaption. Screen readers will announce the information twice. And chances are, one is failing to functionally or illustratively describe the image.
• Don’t provide a figcaption for an image with an empty alt attribute. Providing an empty string prevents a screen reader from announcing that an image is present, so the figcaption is effectively describing nothing. This is also the case for images that don’t load.

Barring these caveats, go forth and describe!