How to correctly use alt and title in HTML image tags

Today, I finally put into words a question that had been nagging at the back of my mind for a while…

“What's the difference between the alt and title attributes on an image?”

You see, I learned to write HTML well before the title element came along, and honestly, for the longest time I didn't give it any thought beyond using it for tooltips. alt tags were what mattered—the text is shown if an image isn't shown, and by screen readers. Super important for accessibility.

So what's title good for?

I asked in our HipChat #UX chat room. I got a few answers, of which probably the best were "alt shows if the image is broken/not loaded" and "title is additional info, alt is for alternative info". Which didn't clarify the issue for me. What is "additional" and what is "alternative"?

What I should have asked was What kind of content should I write for each?

I found practical answers over at What-WG: https://developers.whatwg.org/edits.html#alt

“A corollary to this is that the alt attribute's value should never contain text that could be considered the image's caption, title, or legend. It is supposed to contain replacement text that could be used by users instead of the image; it is not meant to supplement the image. The title attribute can be used for supplemental information.

“Another corollary is that the alt attribute's value should not repeat information that is already provided in the prose next to the image.”

Along with that, some cautions (hat tip to Corey):

Relying on the title attribute is currently discouraged as many user agents do not expose the attribute in an accessible manner as required by this specification.

If there is even the slightest possibility of the author having the ability to provide real alternative text, then it would not be acceptable to omit the alt attribute.

From these we can deduce a proper content pattern:

<img src="women.jpg" alt="Judi, Katelyn, Victoria, Katie, Allison, Maribeth, Kerri, Cassandra" title="The Women of iMarc">

Or, as I applied the pattern to a blog post I was helping Allison create:

<img alt="Detailed wallpaper collection item screenshot" title="The collection detail page includes zoomable images, object history, and public comments" src="/writable/images/allisons_blogs/hne_ca_search_detail_1_.png" />

A Note about SEO

Google mainly uses the alt element to understand the content of images, rather than the title element:

“As the Googlebot does not see the images directly, we generally concentrate on the information provided in the 'alt' attribute. Feel free to supplement the "alt" attribute with "title" and other attributes if they provide value to your users!”

Go forth, and create accessible, semantic and richly tagged content!