No More Excuses - The Definitive Guide To The Alt-Text Field

Have you ever uploaded an image, written the title, and then stared at the alt-text field and thought “What the heck do I put here?” I’d thought the same thing for the longest time too.

That uncertainty is soon to be history, as this post is going to cover some basic tips and concepts on how to write alt text that improves SEO, provides context when images do not load on a page, and communicates the image to a blind or low vision user using a screen-reader. Don’t know what alt-text is? It’s defined here by the W3C.

Keep It Simple

The first tip I’m offering you is, don’t over think it. It’s not poetry (thank goodness, because rhyming really isn’t my strong suit). Generally, an alt-text description doesn’t have to be more than a sentence.

Think of it like a Tweet.

A lot of people use Twitter to succinctly report and describe events. If you’ve tweeted before, think about the alt-text as a tweet describing an image. Effective tweeters are forced to pack enough action words into 140 characters to get their point across. The difference between this approach and filling out the alt-text is that you don’t need to include #hashtags or abrv8ns!

 So, What WORDS Do I Use?

You now know to keep the alt-text description it simple and short. Next up is how you should look at the image to describe it. The main question you should ask yourself is, “Why is this image used? What message it supposed to convey?” Once you understand that, then alt-text writing will be easy as pie! (Mmm. I’d love some strawberry pie right now. Ok back on track.)

Scenario #1: A Big Ten College Website

Audience: Prospective Students

Message to convey:

• Diverse student body
• Youthful energy
• School Spirit
• Big Campus Feel

Image:

Good Alt-Text Example: A large, diverse group of cheering students, standing up and fist-pumping on the bleachers of a basketball game.

Compare that descriptive alt-text example to this less-effective one:

Bad Alt-Text Example: A crowd at a basketball game.

Why Ineffective? It doesn’t convey young students filled with school spirit, or conjure excitement.

Scenario #2: Disaster Recovery / Help Website

Audience: Aid Victims,  Donors

Message to Convey:

• Effects of a Disaster
• Help is on the way
• People, Unity

Image: 

Good Alt-Text Example: Forlorn children stare at the rubble that was once their house in wake of the tornado.

Bad Alt-Text Example: Torn-down house from a tornado.

Why Ineffective? It doesn’t communicate the “personal” focus of this photo.

Scenario #3: Professional Headshot

Audience: Clients, Colleagues

Message to Convey:

• Approachable
• Trustworthy
• Business, yet Approachable

Image: 

Good Alt-Text Example: A middle-aged man in a sports jacket and a white tie, leans against a railing with his hands resting in front of him.

Bad Alt-Text Example: Mr. Smith against a Staircase.

Additional Notes:  

Here are some special cases / instances that I’d like to call out:

• There’s no need to say “Photo / Image of…” because that’s inferred from the <image> tag.
• Logos: Indicate the company name in the logo, like “Phase2 logo”

If Logo is used as the link to the home page, it can simply be “Phase2 Home”

• Images as Text: If you have images as text (which I really hope you don’t), the alt-text should be the text in the image.
• Background Images: If the image is not meaningful or provides context to the user, it may be left as blank (null), and the screen reader will ignore it.

Here’s a few tools that you can use:

Screen-Reader Emulator for Firefox:

• https://addons.mozilla.org/en-us/firefox/addon/fangs-screen-reader-emulator/

Quick check for images without alt-text:

• WebAIM

Now next time you see that alt-text field after you upload an image, you’ll know what to do! Happy describing.