2: What’s the Deal with Alt Text?

(Or: Why a Banana Isn’t Always Just a Banana)

Let’s start simple. You’re looking at three images.

A banana. A pear. An apple.

Choose one.

You probably can. Instantly. Your brain just knows what they are.

Now imagine you can’t see the images. There’s no visual to guide you. No shape, no color, no texture. Just blank space.

The computer doesn’t “see” them either. It just knows there are three images on the page.

Image. Image. Image.

That’s what a screen reader announces – unless you’ve provided alt text.

So instead of helping someone decide which fruit to choose, you’ve basically handed them three mystery buttons and said, “Good luck.”

Or maybe the image didn’t load. Alt text still matters. It’s what shows up in place of the missing picture. 

A 6-panel comic strip of a Siamese cat and a stuffed toy mouse. Since the 4th panel image failed to load, we only see the cat approaching the toy, and then the aftermath, where the cat sleeps peacefully while the toy is badly damaged. The missing 4th panel image has alternative text as a placeholder. It reads "Taffy the cat plays aggressively with his toy mouse."

Alt text has rules – but also requires finesse

Let’s be honest: there’s no single, universally agreed-upon way to write alt text.

If you spend five minutes on Reddit (and I mean the good kind of rabbit hole), you’ll find wildly different opinions about what’s “correct.”

So what you’ll find here isn’t The One True Way™. It’s a practical, human approach grounded in experience that balances usability, empathy, and clarity.

Because writing alt text isn’t just a technical task; it’s a craft.

Let’s break it down.

First: Does the image do something?

If the image is a button, a link, or a control – it has to have alt text. No exceptions.

This is what we call a functional image. The alt text should explain what the image does, not just what it looks like.

  • If it’s a magnifying glass icon that submits a search: “Search”
  • If it’s a cart icon that takes you to checkout: “Shopping cart”
  • If it’s a play button: “Play video”

No need to say “icon of” or “image of.” Just describe the function.

If you skip this kind of alt text, the image becomes a silent dead end – and that’s a huge barrier for keyboard and screen reader users alike.

Context is everything

Alt text depends on where the image is and why it’s there.

Let’s say there’s a diagram of a cat with labels like “floof,” “snoot,” and “do not touch.” You’d want the alt text to capture the humor and explain the structure – because it means something.

Or there’s a meme: a dog smiling calmly while the room burns around him. Alt text should set the scene and land the punchline: “This is fine.”

Or a clever UI that spells out a joke using profile names on a screen: “Everyone who has our password.” You need alt text that gets the gag without just listing each color-coded silhouette.

When we write alt text, we’re not just describing – we’re translating intention.

Sometimes, less is more

Not every image needs alt text. Some are purely decorative – just vibes.

Here’s a quick rule of thumb:
If the image doesn’t do anything, and covering it with your hand doesn’t change the meaning of the content – it probably doesn’t need alt text.

In that case, the best alt text is actually no alt text. Technically, you’d use alt=””.

That tells screen readers to skip it entirely, so you’re not interrupting the experience with something irrelevant.

Because here’s the thing: alt text isn’t just about what you say – it’s about when you say it.

How alt text fits into the flow of the page

That’s the “second voice” problem. When your alt text interrupts the reader with a random detail that doesn’t help, it breaks the rhythm. It’s like someone shouting “IMAGE: BANANA!” while you’re trying to read.

To understand why that matters, it helps to know where alt text actually lives in a webpage’s flow.

Let’s say you’ve got a section introducing someone (hi, it’s me!). It might go something like this:

  • A heading that says “Hi.”
  • A short paragraph: “I’m Jessica Chambers from Silktide, and I’m here today to talk about alt text.”
  • An image: a cartoon of me and my cat, Salem.
  • Another paragraph with some extra commentary.

If you’re reading this visually, it all flows together. You glance at the image as part of the layout. It doesn’t feel like a disruption.

But for someone using a screen reader, here’s what that sounds like:

“Heading level one: Hi.
I’m Jessica Chambers from Silktide, and I’m here today to talk about alt text.
Image: A redheaded woman with a black cat.
 They say a picture is worth a thousand words…”

It interrupts the flow. It’s like someone stepping into your sentence to point at a picture and say, “Image!” – then reading the label out loud, whether it helps or not.

That’s why irrelevant or overly detailed alt text doesn’t just sit quietly – it derails the rhythm. If it’s not helping, it’s hurting.

So before you write alt text, ask yourself:
Would this make sense if I read the page aloud to someone else?
Is this where I’d pause to describe the image?
And would that actually help?

If the answer is no? That’s a clue to rethink it.

Let’s talk about that cat

Let’s go back to our earlier example – a section on a webpage introducing me. You’ve got a heading, a quick intro, and an image: a cartoon of a redheaded woman (hi!) with a black cat in her lap.

If you were writing the alt text, you might go with:

“A redheaded woman with a black cat.”

But does that actually help?

What if I told you the woman is me – and the cat is my very real rescue buddy, Salem? Suddenly it matters more. Maybe the photo is there to introduce us.

So you write:

“Jessica Chambers with her awesome rescue cat, Salem.”

That feels better. It tells you who we are and why it might matter.

Or maybe it works better as a caption, so everyone gets the context – not just screen reader users.

The introductory webpage for Jessica. The caption text is visible under the image of her and Salem.

Alt text vs captions vs surrounding text

This is where we start blending science and art.

Alt text is great for short, specific descriptions.
Captions work best when context matters to everyone.
Surrounding text can sometimes do the heavy lifting, especially when an image reinforces what’s already being said.

Ask yourself: Where does this explanation belong?
Because if the meaning’s already clear, you don’t need to repeat it.
But if it’s missing entirely, your alt text might be the only way someone gets it.

So… what are the rules?

There’s no one-size-fits-all formula, but here’s the guidance we swear by:

  • Does the image do something? Describe the function.
  • Is it meaningful? Say what it shows – and why it matters.
  • Is it decorative? Skip it with alt=””.
  • Could it be a caption instead? Use your judgment.

You’ve probably heard me say this before:
Write it like you’re reading the page to someone over the phone.

Would you describe every image in detail? No.
Would you announce a border or a stock photo filename? Definitely not.
Would you pause and say, “Hey, that’s me with my cat Salem!” if it mattered? Absolutely.

That’s the heart of it.

Alt text isn’t about ticking a box. It’s about helping someone else experience the page.

And that starts with asking:
Why is this image here? What’s it trying to do?

Accessibility starts with intention. And alt text is the perfect place to practice it.

Back to top