What Screen Reader Users Say About Alt Text

Recently, we sat down with members of AudioEye’s A11iance team — who also help us test customer websites — to discuss all things alt text. Our goal was to understand the unwritten rules of alt text — and learn how businesses can take their image descriptions from good enough to great.

Not surprisingly, our A11iance members had plenty of ideas. But the word of the day was essential. Short or long, sparse or overflowing with detail … it didn’t matter as long as the most important details were covered.

And really, that’s the point of alt text. What does a person who cannot perceive an image visually need to know about it, so they aren’t left behind.

Here’s a brief recap of our conversation — plus a few tips to help you get unstuck if you’re having a hard time writing alt text:

When it comes to alt text, is less more?

[CHRISTY SMITH, A11IANCE ADVOCATE]

Right off the bat, I think it’s important to understand that there’s not one right way to write alt text. But there are certainly wrong ways.

[CHARLES HISER, A11IANCE ADVOCATE]

It’s really about making sure you capture the essential details. If your alt text is too long, it’s easy for someone to get lost in the description.

[CHRISTY]

If it’s a picture of a hat, you probably don’t need a whole lot. Unless the hat has a lot of patterning.

[CHARLES]

Absolutely. But if you’re looking at the latest James Webb Telescope images, there’s no way to describe them in less than 300 characters. You need more alt text to do them justice.

How do you figure out what’s essential and what’s not?

[CHRISTY]

Context matters. If someone is modeling a shirt on a clothing website, I want more detail. I don’t just want to know it’s a black shirt. But if I’m reading a news article and there’s a picture of two people in front of a business, I probably don’t care about the patterns on their shirts.

[ANA JACOB, A11IANCE ADVOCATE]

If the picture is remarkable enough that it’s a landmark, you should use it as alt text. It’s not a reddish-orange bridge, but the Golden Gate Bridge.

[CHARLES]

I don’t think you have to describe the background too much. Or the weather. Unless it pertains to the image.

What about describing a person’s physical appearance?

[ANA]

I think it’s still context. I remember reading about someone who was accused of making a racist remark. The article had an image of the person, but the alt text didn’t clarify their race. I was left sitting there, wondering about their race.

In a case like that, it does matter. And I shouldn’t have to go and Google it.

What’s your take on decorative images?

(Moderator: If an image does not add any additional information to the screen’s content, you can mark it as “decorative” and skip writing alt text.)

[CHARLES]

WCAG 1.1.1: Non-text Content has a section that says, “If an image is decorative, you hide it from screen readers.” I think that’s where some people get stuck, and others get a bit lazy. Does an image contain any useful information? Or is it easier to just mark as decorative?

[ANA]

I don’t need a fancy little emoji like a red heart or thumbs up for a Like button. And I certainly don’t need a description.

[CHRISTY]

If it’s a line of hearts in the background, maybe hide it? But otherwise, tell us what’s on the screen. The whole point of alt text is that we can get the same information as people who can see.

[CHARLES]

I love finding Easter eggs in the background of movies. I like details. For me, it’s hard to say that anything should be decorative. If the image is there, shouldn’t everyone have access?

But I also understand that it’s hard to always come up with unique, clever alt text.

When you test a customer site, how do you handle alt text?

[CHARLES]

There are certain issues that AudioEye’s solution handles automatically, like adding numbers to images that have the same alt text. But for product descriptions or anything that seems brand-oriented, we leave feedback that it’s something the customer should review.

(Moderator: WCAG Success Criterion 1.1.1: Non-text content requires every line of alt text be different, so users can differentiate between them).

[ANA]

Most of the time, we send alt text edits back to the customer. But for something really straightforward like a logo at the top of a website, it’s easy enough to fix.

[CHARLES]

Without knowing how an image supports the overall goal of a page, it’s hard to write alt text.

If someone was stuck on alt text, how would you help them get unstuck?

[ANA]

Pretend you didn’t have a picture! Take a hotel, for example. If you couldn’t post a picture of your rooms, how would you describe them? What would you write that would convince people to book a room?

[CHARLES]

Treat your alt text like a Twitter post. Twitter doubled its character limit because the company realized that people needed more space. You should try to keep your alt text under 300 characters, but you also shouldn’t feel boxed in by that number.

[ANA]

For products and services, brainstorm two or three questions that potential buyers might have. If you’re selling a shoe, does it have laces or a buckle? Is it a slide-on? What kind of material is it?

All of those questions should be answered by your product images. And they should be answered by your alt text as well.