Write ALT text like someone’s gonna read it

June 19, 2014

Images

<img src="myImage.png" alt="Alt Text" />

If you’ve ever built a website, there’s a good chance you’ve written something like this. A simple image tag using the alt attribute. There’s a decent chance that you don’t even use the alt attribute when creating image tags; even if you do, you’re probably not putting a lot of thought into what goes inside.

Broken Images

When I first learned about the alt attribute, I was told that if for whatever reason your image should fail to load, the alt text is all your users would see. So, I began creating images like this:

<img src="myImage.png" alt="Tree" />

Search Engines

Later in my career I learned about the mysterious ways in which search engines work. I was told that if you want your images to show up well in Google image searches, you must have good keywords in your alt text. So, I began creating images like this:

<img src="myImage.png" alt="San Francisco web developers tree" />

Accessibility

At this point in my career I have tests in place to make sure my images are always served, and I really just don’t care about SEO anymore. I have, however, begun to care a lot about web accessibility. I want the websites I create to be accessible to all types of devices. Most importantly, I want my alt text to adequately describe my image if the page is being consumed by some sort of screen reader. For the time being, I create my images like this:

<img src="myImage.png" alt="A large tree" />

What about you? Do you add alt text to all of your images? What are your priorities? Leave a comment!