Flickr: combining ALT and TITLE for images12 Sep 2006
If you want to embed one of your own Flickr pictures into your blog, the Flickr photo page gives you the HTML code for easy copy/paste. They require you to link back to the photo page, so obviously in the HTML they provide, they give your an image with a link, i.e. an
<img> tag in between a
<a> </a> anchor tag pair. A typical example:
<a href="http://www.flickr.com/photos/(...)" title="<em>Photo Sharing</em>"><img src="http://static.flickr.com/(...).jpg" width="600" height="1200" alt="(image title)" /></a>
As you can see, they combine both an anchor title (always “Photo Sharing”) with an image alt text (Flickr uses the photo title for that). Both fields give more info about the objects they refer to and are very much loved by search engines. It should come as no surprise that the #1 Google result for “photo sharing” is Flickr.
The thing is: when you move your mouse pointer over the image (‘hover’), your browser will show only one of these two texts. Internet Explorer shows the
img alt text, while Firefox and Flock show the
a title text. So if you’re using Firefox, every Flickr photo that was embedded with Flickr’s HTML code, will show “Photo sharing” and not the photo’s title.
Since the attributes
title also serve an accessibility purpose: what do screen readers (text-to-speech) make of the combination? Do they cite both, or also choose one of the two?