--- title: Alt vs Figcaption teaser: 'Describing images with the alt attribute and figcaption element. ' tags: web,accessibility,frontend,html,images author: Elaina Natario published_on: 2020-12-01 --- 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. [`img` element]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img ## 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).

A small black and white dog sitting and looking to the side.

```html 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.

Three dark purple wavy lines.

```html ``` 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. [`figcaption` element]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figcaption [`figure`]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure

A closeup of a llama's face looking off to the side on a mountain.
Martha is one of the many domesticated llamas that roam freely around the grounds of Machu Picchu.

```html
A closeup of a llama's face looking off to the side on a mountain.
Martha is one of the many domesticated llamas that roam freely around the grounds of Machu Picchu.
``` A `figcaption` can also describe multiple images within a `figure`.

The side of a mountain with a waterfall running down it. A brown donkey carrying 4 red wooden beams on its back. A man in a blue jacket and hiking gear looking to the side on a mountain path.
A few photos from my hike along the Inca Trail in Peru in .

```html
The side of a mountain with a waterfall running down it. A brown donkey carrying 4 red wooden beams on its back. A man in a blue jacket and hiking gear looking to the side while standing on a mountain path.
A few photos from my hike along the Inca Trail in Peru in .
``` 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. `The Mona Lisa`) - The `time` element can label when an image was created. [`small`]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small [`cite`]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/cite [`time`]: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time ## 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.

A blue butterfly sitting on an orange flower.

```html A blue butterfly sitting on an orange flower. ``` Functional descriptions don’t necessarily have to be literal; they can express what an image represents.

A pencil on a purple circle to denote an edit text action.

```html 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.

Two people high-fiving mid-air.
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 Bikeshed and Giant Robots podcasts.

```html
Two people high-fiving mid-air.
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 Bikeshed and Giant Robots podcasts.
``` ## 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:

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

**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. [not rubber, in this case]: https://en.wikipedia.org/wiki/Rubber_duck_debugging **What it looks like in code:** ```html
A woman holding an oversized plush duck sits at a desk in an office, looking at a laptop.
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.
``` ### 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][figcaption caveat] a `figcaption` in the expected manner. Scott O'Hara, an accessibility engineer, [suggests adding a role and an `aria-label`][figcaption fix] to a `figure` that repeats the raw text within the `figcaption`. **Our code with this addition:** ```html
A woman holding an oversized plush duck sits at a desk in an office, looking at a laptop.
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.
``` [figcaption caveat]: https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html#figures-and-screen-readers [figcaption fix]: https://www.scottohara.me/blog/2019/01/21/how-do-you-figure.html#wrapping-up ## 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!