Is there a difference using the alt attribute and figcaption?

Hey guys, please I have a question.
Is there actually a difference between the alt attribute and using the element? Which should be used and should one be ignored when the other is used or are they always to be used simultaneously?
I do feel the alt attribute is meant for other developers, SEO, and for those that are visually impared but if both are meant to describe the image which is preferred over the other and can they both be used at the same time, or is there some sought of redundancy when making use of them?

So basically figcaption is a caption for a figure. The caption is always visible by everyone, not only for those who are visually impaired . 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 whereas figcaption descriptions should be editorial or illustrative.

The alt attribute should provide a written equivalent of of what appears in an image and is useful in various situations :

  • those who use screen readers to understand what the images are displaying

  • Serving as a way to better index your site for improved SEO

  • If ever a user is unable to or choose not to load your images, the description will appear on the screen instead of your image.

An example for this image.

You could use this :

<img  src="dog.jpg"  alt="A  white dog running at the beach.">

If an image is simply decorative such as a border for example, you can set an empty string for the alt attribute, which will tell screen readers to ignore the element.

The figcaption element comes with a parent figure element which can describe a wide variety of media and text, such as photos, videos, illustrations, diagrams , quotes, and charts etc. A figcaption is not required to be in every figure element, but a figcaption always needs a figure parent.

A figcaption can also describe multiple images within a figure. Here is a good example where they can be used together :

<figure>
  <img 
    src="buddha.jpg"
    alt="The Big Buddha statue in Phuket, Thailand.">
  <img
    src="beach.jpg"
    alt="A beautiful sunset at Rawai beach in Phuket, Thailand.">
  <img
    src="market.jpg"
    alt="The famous Sunday Walking Street Market in the old Thalang road of Phuket Town.">
  <figcaption>
  A few photos from my last trip in Thailand in <time datetime="2019-11">November 2019</time>.
  </figcaption>
</figure>

Also as figcation is a block level element, it can also include other inline elements to better inform the users. Above you can see that time is being used in the figcaption. Other inline elements like cite or small can also be used.

You can also have functional descriptions. A good example would be for icons.
You can have an envelope icon used as a button to send an email, so the alt attribute will have to describe what the image represents :

<img src="envelope.svg"  alt="Send email">

So it is really up to the developer to assess when and how to use the alt attribute and the figcaption element. However to describe all your images appropriately, avoid using the exact same words for both an alt attribute and a figcaption as screen readers will announce it twice and it might be confusing for the users.

I also found a very helpful article that explains the differences between the two.
Difference between alt and figcaption

1 Like

Thanks for the explaination.