An image paired with a caption is nothing unusual: a chart followed by a line naming its source, a photo followed by a figure number and a short description. The common reflex is to add that caption as a plain paragraph placed right after the image, with no technical link between the two. For a sighted visitor, the connection is obvious. For a screen reader, that paragraph remains an isolated piece of text among many others, with no formal relationship to the image before it.
<figcaption> fixes that gap: attached to a <figure>, it becomes its official caption, recognised as such by the browser and by assistive technologies.
Definition
<figcaption> is the caption of a <figure>: it describes what the accompanying content shows, whether that is an image, a chart, or a code snippet. The standard allows only one per figure, and it must sit in a specific spot: either right at the start, or right at the end of the figure's content, never in the middle.
A specific place: first or last child
Both positions are valid, and they match different reading habits. Placed first, the caption works like a heading announcing what follows, a common pattern in scientific or technical publications (Figure 1: monthly traffic over the year). Placed last, it works like an explanation coming after the fact, the more common pattern on the web for photos and illustrations.
<figure>
<img
src="monthly-traffic.png"
alt="Monthly traffic curve from January to December"
/>
<figcaption>Figure 1: traffic doubles after the June redesign</figcaption>
</figure>An automatic association for assistive technology
As soon as a <figcaption> is present, the browser automatically associates its text with the figure's content as an accessible description, with no need to add an aria-describedby by hand. A screen reader then announces the figure and its caption as one coherent unit, in the order they are written. That automatic link is really what sets <figcaption> apart from a paragraph placed at random next to an image: one is structurally attached, the other stays an accidental neighbour.
Difference from a table's caption
<caption> plays a comparable role, but only inside tables: it can only appear inside a table, and only as its first child. <figcaption> only works inside a <figure>, never anywhere else. Both elements share the same idea, captioning a piece of content, but each stays strictly tied to its own container.
Writing a good caption
A good caption adds information the image alone does not provide: a reference number, the source of the data, the date a photo was taken, or context explaining why it matters. It works best kept short, a sentence or two is usually enough. The pitfall to avoid is repeating word for word what the image's alt attribute already says: the two texts are read back to back by a screen reader, and a full repetition adds nothing, it just makes the listening experience longer for no reason.
<figcaption>. Adding a second one, by mistake or through a copy-paste, does not throw any visible error: the browser simply ignores the one that sits neither first nor last, or keeps only the first one it finds, depending on the case. The result is a missing caption that nobody notices until an accessibility audit.figcaption?No, the standard only allows one per figure. If several captions are present, behaviour becomes inconsistent from one browser to another, and the safest outcome is always a single caption, correctly placed as the first or last child.
figcaption text replace the image's alt attribute?No, the two play different roles and should not repeat the same sentence. The alt attribute describes the image itself for someone who cannot see it, while the caption describes the figure as a whole, with its number, source, or context, and stays visible to everyone.
figcaption be used when the figure has no image?Yes, without any issue. A figure can hold a code snippet, a chart, a quote, or a video, and <figcaption> works exactly the same way to caption any of that content.