28

There are two ways to specify "accompanying text" with images in HTML:

  • alt attribute
  • a separate <figcaption> element.

Example from w3s:

<figure>
  <img src="pic_trulli.jpg" alt="Trulli" style="width:100%">
  <figcaption>Fig.1 - Trulli, Puglia, Italy.</figcaption>
</figure>

In terms of accessibility, what's the difference between the two? What would be appropriate values to put in those slots? For example, should the alt be a visual description of the picture, and <figcaption> a contextual description?

Input from visually impaired users would be greatly appreciated! Extra suggestions are welcome.

1

5 Answers 5

45

I'm a blind user. I would say that there are two big categories of images on the web:

  • Functional images
  • Illustrative images a.k.a. figures

AS the name says, figcaption is a caption for a figure. The caption is always visible by everybody, not only blind people. Figures are images that can be found in a book, an article, or whatever more or less long paragraphs of text. Most of the time, figures are purely illustrative.

When you use figcaption, the alt attribute should probably be empty:

  • Copying the text of the figcaption into the alt attribute, or any shortened version, is almost always useless: the screen reader will read twice the same or almost the same information, and it's worth absolutely nothing
  • You may think that the alt attribute could be useful for a longer description of the image, that wouldn't fit in the figcaption; for example a detailed description of a chart or a diagram. But in fact, this kind of description is better below the image or in another page (then available for everybody), rather than in the alt attribute. The alt attribute should normally remain short.
  • You may think that the figcaption is useless and only set the alt attribute to something. Example: "Photo with Alice on the left, Bob on the right". But in fact sighted people could as well find this information useful, if they don't know Alice and Bob for example. So it could be interesting to move this description to the figcaption, so that everybody benefits from it and not only blind people.

Now, the biggest case when you won't use figure/figcaption is when images are functional: a button taht can be clicked, an icon with a precise meaning, etc. The basic rules for alt texts of functional images are:

  • If you can interact with the image to perform actions (click, etc.), or if the icon conveys an information, then you must set a non-empty alt. It must be a function description, not a objective description of the image.
    Example 1: "Go back" is good, while "Blue left arrow" is bad.
    Example 2: "Unread message" is good, while "Closed enveloppe" is bad
  • Otherwise, if the image provide no interaction and if it doesn't convey any information, then it is illustrative; the alt should be empty in that case
7
  • 3
    Thanks for the suggestion QuentinC. My understanding is that using an empty alt attribute will hide the image from a screen reader. In other words, if you use an empty alt followed by a figcaption, it will not announce that an image preceded the figcaption. It will just read the figcaption out of context. Here's an article that goes into more detail: scottohara.me/blog/2019/01/21/… Has that been your experience Quentin?
    – robdodson
    Apr 6, 2020 at 17:23
  • @QuentinC Is it better for blind user to set image attribute alt to empty string or e.g. "[Photo of Alice and Bob]"? First option could be better if figcaption already includes the information that "Alice is on the left, Bob on the right". Second option could make understanding the structure of the page easier. Jun 23, 2021 at 11:03
  • 1
    @robdodson: that's correct, but that isn't usually a big problem. Even if the image has no alt text and is totally ignored, we can perfectly figure out that some out of context text refers to an invisible image. This happens often when you read OCR scanned documents, for example.
    – QuentinC
    Jun 24, 2021 at 15:34
  • 2
    @Mikko Rantalainen: I agree. In fact the most important is not to repeat yourself unnecessarily. If you can make the alt and figcaption to be complementary one of the other, then specify both! It's better!
    – QuentinC
    Jun 24, 2021 at 15:39
  • Would having an empty alt attribute still convey to screen reader users that there is actually a "real" image, which they then could download (for example)? Cheers from Switzerland, by the way, I hope you remember me from the times at «Access for all». Hope you're having a good time, Quentin! Jul 21, 2021 at 15:26
6

The caption provides information about the image — for all users.

The alt text replaces the image when the image cannot be displayed (e.g. because the user is blind, or the image didn't load because the user went through a tunnel).

Sometimes alt text can be a description of an image, but not always or even usually. It needs to convey whatever information is trying to convey.

Some images are entirely decorative (alt="") or contain only information also conveyed through nearby text (alt=""). Many websites display a company logo on the page, by the information conveyed by the image next to the menu icon on the Google News site is that it is a Google News site (alt="Google News") and not that the picture contains the Google New logo (so not alt="Logo" or alt="Google News Logo").

screenshot of Google News website

1
  • You don't need anything in the alt if the figcaption provides a sufficient description. In fact, it can make the screen reader experience unnecessarily noisy. In this case I would use alt="" on the image, and let the figcaption serve as the accessible name for the figure. Oct 18, 2019 at 11:34
1

As indicated by the terms, they differ from the fact than one is an alternative (when the image can't be seen) while the other one is a (fig)caption (and always visible).

The caption is an information you want to be visible. For instance a copyright, the name of the author, the title of the object. For instance, putting a copyright in an alt attribute is quite useless (except for SEO).

The alt attribute will be available to replace the content of the image. For instance, if your image is a logo with the name of your Company, the alt will contain this as a text alternative.

1

My understanding is as follows, based on some experience working with images and also building on QuentinC's excellent answer. In short, use figcaption only in case of illustrative images (that convey information but have no interactive functionality). Even then it's up to you to decide whether you use:

  • alt, thus conveying your short, descriptive, human-friendly text only to visually impaired people (via screen readers) and search engines. Use it if every important detail is already visible from the image itself, for people who can see it directly (to convey the same information to users and robots, who can't)
  • and/or figcaption to render the text directly on the UI, thus conveying it to all users, not just search engines and visually impaired people. Use it if the text itself conveys some additional, important details that the picture does not (e.g. the author of the photo, a copyright, or the names of people on the photo, when that's an important detail). It can be combined either with an empty alt tag (alt=""), or with an alt tag that conveys some additional, meaningful, and different information (that's clearly visible on the picture for those who can see it).

In a bit more detail, there are 3 types of images: illustrative, functional or purely decorational:

  • Illustrative images that convey information but don't have interactive functionality (e.g. a logo or a product photo):
    • either alt="A short, descriptive, human-friendly text about the image's content" (used by screen readers to describe the contents of the image to both search engines and visually impaired people)
    • or if you want everybody to see the text (not just search engines and visually impaired people), then use <figcaption>A short, descriptive, human-friendly text about the image's content</figcaption> and set alt="" or to some useful text that's different than the one in figcaption (to avoid redudant text and prevent screen readers from reading it twice)
  • Functional images that have interactive functinality and also convey information (e.g. a clickable button with an email icon and nothing else): alt="A few words about the function itself" (the text itself could be e.g. "send e-mail")
  • Decorational images that don't convey information, and either have or don't have an interactive functinality (e.g. a background image on a static or clickable element): alt="" (used to explicitly specify that the image is purely decorational). Google Lighthouse does warn about not having an alt tag, and encourages always setting it, even for purely decorative images (in which case it should be an empty string)

It is important to note that all images should have the alt tag defined, but for purely decorational images only, it should be an empty string. Illustrative images may (optionally) also have a figcaption, in which case, their alt tag can also be an empty string, or a string which is different than the one in their figcaption.

0

alt is used to describe the image to the screen readers. It is not visible to the user unless the image is not fetched by the browser. figcaption is also used to describe the image, but it is visible to the users and also readable by the screen-reader.

If you want to display info about the picture to the users and also to the screen readers without repetition, then you can add aria-hidden="true" attribute in figcaption, which will help screen readers skip the content.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.