Scott O’Hara digs into the <figure>
and <figcaption>
elements. Gotta love a good ol’ HTML deep dive.
I use these on just about every blog post here on CSS-Tricks, and as I’ve suspected, I’ve basically been doing it wrong forever. My original thinking was that a figcaption
was just as good as the alt
attribute. I generally use it to describe the image.
<figure>
<img src="starry-night.jpg" alt="">
<figcaption>The Starry Night, a famous painting by Vincent van Gogh</figcaption>
</figure>
I intentionally left off the alt text, because the figcaption
is saying what I would want to say in the alt
text and I thought duplicating it would be annoying (to a screen reader user) and unnecessary. Scott says that’s bad as the empty alt text makes the image entirely undiscoverable by some screen readers and the figure is describing nothing as a result.
The correct answer, I think, is to do more work:
<figure>
<img src="starry-night.jpg" alt="An abstract painting with a weird squiggly tree thing in front of a swirling starry nighttime sky.">
<figcaption>The Starry Night, a famous painting by Vincent van Gogh</figcaption>
</figure>
It’s a good goal, and I should do better about this. It’s just laziness that gets in the way, and laziness that makes me wish there was a pattern that allowed me to write a description once that worked for both. Maybe something like Nino Ross Rodriguez just shared today where artificial intelligence can take some of the lift. But that’s kinda not the point here. The point is that you can’t write it once because <figcaption>
and alt
do different things.
Thanks for clarifying this. I always wondered about the correct use of “alt” attributes with images inside figures with figcaptions. Now I know for sure.
A question I have about figure elements is if it is Ok to just use them on their own…say as markup for a “card” module or something…
I think the spec says that a figure should relate to some text content on the document….but I have seen a lot of uses of figures all by themselves without any linkage to corresponding text.
Figure elements allow flow content (most tags that wrap text, or embed content such as images), with a single figcaption, as the very first or very last element.
Figcaption are also not meant to replace alt tags – they have different implications. Alt tag is for explaining an image (and accessible devices will state to users that there is an image, followed by the alt to explain it; a blank alt tag will never mention there’s an image, so the figcaption would just “come out of left field”), which is used by both accessible devices and SEO (this is super important, if you’re concerned about search results). Figcaptions are more akin to labels, labelling the content inside the figure.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/figure
Also, the most important part, is that figures are sectioning roots. This means the content gets removed from the flow of the page – like an aside. If the content inside has no specific point (or is referred to specifically) in the content, its fine. But if the content belongs in a specific part of the content (e.g. an image that is floating amongst related paragraph text), then a figure should not be used.