Accessibility - Difference between <img alt> and <figcaption>

Question

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.

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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.

Answer 5

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").