Alt text for before-and-after images: describe the change, not just the two photos

A before-and-after image exists to show a difference: a renovated kitchen, a redesigned landing page, a skincare routine, a cleaned-up logo. So the alt text should describe the difference. Say which state is which, name what changed, and stop. “Kitchen before and after” tells a screen reader user that a comparison exists and nothing about what it shows.

The same goes for side-by-side images and sliders. Whether you have one combined graphic or two photos posted next to each other, the reader should come away knowing what was different and how much it mattered. (If the basics are new to you, start with why alt text matters.)

What goes in the alt text?

Lead with the pairing, then give each state a short label and the details that differ. The W3C’s guidance on informative images says the text alternative should convey the meaning or content that is displayed visually, which is usually not a literal description of every pixel. For a comparison, the meaning is the change.

One image or two?

If the two halves live in one image file, you write one alt text, as above. If they are separate images, the W3C’s tutorial on groups of images separates two cases. When several images together convey a single piece of information, one image gets the text alternative for the whole group and the others get an empty alt. When they are a collection of related items, each needs its own text alternative that describes it and its relationship within the group.

On your own site you can follow that directly. On most social platforms every image gets its own alt field, so label each one: “Before: …” on the first and “After: …” on the second, with the change spelled out in the second. If your post is a swipeable sequence, our guide to alt text for carousels covers keeping the order clear.

When the difference is the whole point

Some comparisons carry more than a sentence can hold, like a redesign with a dozen small changes or a chart that shifted. The W3C’s page on complex images recommends a two-part text alternative: a short description in the alt attribute, plus a longer description of the essential information placed where everyone can reach it, such as in the caption or the text beside the image. Put the headline change in the alt text and the full list below the image.

Watch the length, too. A comparison alt text often runs past 125 characters, and that is acceptable when the content is the information; see the 125-character rule for when to break it.

Describe what the image shows, not what you hope it proves

Results images invite overclaiming. If the photo shows clearer skin or a straighter fence, describe that. Do not add “in just two weeks” or “guaranteed results” unless the post itself says so and you can stand behind it. Alt text should match what is visible and what you are claiming elsewhere, so check it against the caption before you post. This is general accessibility guidance, not legal advice.

A quick workflow: screenshot both states, run SnipAlt with Ctrl+Shift+A (⌘⇧A on a Mac), then edit the draft so it names which side is before, which is after, and the one change that matters most.