Using ALT tags properly in emails and XHTML

ALT tags are heavily misunderstood. ALT tags are great for accessibility and slower connections, but they are often misused. This is a big trend in emails I've received lately:

Sample email reads: spacerspacer spacerspacer Wells Fargo spacerspacer Start Saving Time and Money

This is what I see before I click "show images in this email." In other words, this is what everyone sees first. No one should be able to know your "spacer" exists, even if images are disabled.

Here's another email viewed from my Gmail inbox:

Gmail preview reads: corner corner tablel

This preview should list the first line of text in the email. Instead it shows the ALT text for images that serve to style the email.

No ALT Tags?

Don't get me wrong. Not using ALT tags means your code won't validate and screen readers will read the image's src attribute aloud. There's talk of changing this in HTML 5, but for now we're stuck with XHTML and HTML 4.

Use Empty ALT tags instead

An empty alt tag looks like this:

<img src="image.png" alt="" />

It signifies to the browser, email client, or screen reader that this image has no informational content. It says "this image is just for decoration, move along." This is what should have been used in the emails posted above. Empty ALT tags will validate. An image with no ALT tag will not.

Accessibility

Think about this from an accessibility standpoint. Before you click "show images," you're basically seeing what a screen reader does. I can't think of a more useful way of making your emails accessible and degradable. Look at this and think about how ALT tags really help visually impaired users.

Is it helpful when showing a stock photo of a man with a briefcase to say "picture of businessman?" No way. Stock photos like this never communicate any visceral information, they're just there because your marketing team likes them.

Be smarter with your ALT text. Your logo needs ALT text, because it says your company's name. Your big promotion banner needs ALT text because it describes your big promotion in your favorite font. Use your best judgment, think about what your image communicates and you'll do well.

Leave a Comment