alt vs title vs caption: When to Use Each Image Attribute

Three things attach text to an image in HTML: the alt attribute, the title attribute, and a caption (<figcaption>). They are constantly confused for one another, and they are not interchangeable. They appear in different places, reach different audiences, and one of the three is, in practice, close to useless. Here is what each actually does and which one you need.

For the deeper rules on writing the alt string itself, see the alt text SEO and accessibility guide. This post is specifically about which attribute does what.

The one-screen comparison

| | alt | title | <figcaption> | |---|---|---|---| | Where it lives | inside <img> | inside <img> (or any element) | inside <figure>, as a sibling of <img> | | Visible on the page? | No | Only as a hover tooltip | Yes, always | | Shown on mobile? | n/a | No (no hover on touch) | Yes | | Read by screen readers? | Yes, reliably | Inconsistently; often ignored | Yes | | Read when the image fails to load? | Yes, displayed in its place | No | Yes (it's separate text) | | Used by Google for image context? | Yes (primary) | Negligible | Yes (it's page text) | | Required for accessibility? | Yes, on meaningful images | No | No, but helpful |

If you read only one row, read the "screen readers" one. That's the whole reason alt is mandatory and title is optional.

alt: the one that's actually required

The alt attribute is the text alternative to the image, what should be conveyed if the image can't be seen. That covers three audiences at once: screen-reader users (who hear it), anyone whose image fails to load (they see it rendered in the broken image's place), and Google, which uses it as a primary signal for understanding the image.

<img src="harbor.jpg" alt="Sunset over a harbor with fishing boats">

Because it serves the "image is unavailable" case, alt should describe the image's content or function, not editorialise. Every meaningful image needs it. Decorative images need an explicit empty alt="" so screen readers skip them, but the attribute itself should always be present.

title: the attribute you can almost always skip

The title attribute produces a small tooltip when a mouse pointer hovers over the image for about a second. That sentence already contains its three fatal flaws:

1. It requires a mouse hover. On phones and tablets, the majority of web traffic, there is no hover, so title is simply never seen.
2. Screen readers treat it inconsistently. Most ignore it by default, or only read it if the user changes a non-default setting. You cannot rely on it for accessibility.
3. It adds no meaningful SEO value. Google does not treat title as an important image signal; alt and surrounding text carry that weight.

<!-- This tooltip is invisible on mobile and unreliable for screen readers -->
<img src="harbor.jpg" alt="Sunset over a harbor" title="Taken in Lisbon, 2024">

There are narrow legitimate uses (a tooltip giving extra, non-essential trivia to mouse users), but if information is important, it does not belong in title, because a large share of your audience will never receive it. The common anti-pattern is duplicating alt into title, which gains you nothing and can make some screen readers announce the text twice. When in doubt, leave title off.

<figcaption>: visible context for everyone

A caption is real, visible text. It lives inside a <figure> element as a sibling of the image, and everyone (sighted users, screen-reader users, and Google) receives it identically. Use it when the context is worth showing to all readers: a credit, a source, an explanation, a data note.

<figure>
  <img src="chart.png"
       alt="Bar chart: mobile traffic grew 42% year over year">
  <figcaption>
    Mobile organic sessions, 2024 vs 2025. Source: Google Analytics 4.
  </figcaption>
</figure>

Notice that alt and <figcaption> do different jobs here and so they say different things. The alt carries the takeaway for someone who can't see the chart. The caption adds the source and date that everyone benefits from. They complement; they don't duplicate. Repeating the caption verbatim in alt just makes screen-reader users hear the same sentence twice in a row.

A 10-second decision

• Can the image be seen / loaded? If not, what would the user miss? → that goes in alt. (Always present; alt="" if decorative.)
• Is there context worth showing to all readers, like a credit, a source, or an explanation? → <figcaption>.
• Do you have non-essential trivia for desktop mouse users only? → maybe title, but usually just skip it.

Get alt right on every image, add captions where they genuinely help, and treat title as optional decoration. While you're tidying on-page markup, the Heading Analyzer checks the heading structure that sits around your figures, and for the images themselves, image format choice often matters more for performance than any of these attributes. For ready-made alt strings to model, see 30 alt text examples.

Frequently Asked Questions

Do I need both alt and title on an image?

No. alt is required on meaningful images; title is optional and usually unnecessary. Adding title that just repeats alt provides no benefit and can cause some screen readers to read the text twice.

Is the title attribute good or bad for SEO?

It's essentially neutral-to-useless. Google relies on alt text and surrounding page content to understand images, not the title attribute. Don't spend effort on title expecting a ranking effect.

Does a caption replace alt text?

No. A caption (<figcaption>) is visible context for everyone, while alt is the text alternative for when the image can't be seen. An image can have both, and they should say different things: alt describes the image, the caption adds context like a source or credit.

Why doesn't my title tooltip show on mobile?

Because title tooltips are triggered by mouse hover, and touchscreens have no hover state. This is exactly why you shouldn't put important information in title; most mobile users will never see it.

Where does each one show if the image fails to load?

The alt text is rendered in the broken image's place, so the user still gets the meaning. A <figcaption> is separate text and stays visible regardless. The title tooltip shows nothing useful in that situation.