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

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 2

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

Answer 3

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.