Keith’s recent post on the use of title attributes and the subsequent discussion that followed was helpful in clearing up how they, and alt attributes, should be appropriately used.
However, recent reading has caused me to still have some confusion about how they should be used for images. Let me explain.
On reading through the comments, I agreed wholeheartedly with Dave Shea’s comment (#6) on how alt and title attributes served different purposes and should be used accordingly.
The Alt Attribute
In a nutshell, my understanding is that the alt attribute acts as a text placeholder should the image not be rendered for any reason. It should be brief and to the point and focus solely on describing the image.
The Title Attribute
The title attribute, however, can be used to describe the image in a way that gives more context (relating it more closely to the content with which it is associated, for example).
I think the difference can be seen most clearly in an example where the image is also a link.
In this instance, the alt attribute would be used to describe the image, while the title attribute would be used to describe where the link takes you to, why you should click on the link, etc.
The W3C Mixes Things Up
That sounded pretty reasonable to me. However, in reading the W3C’s HTML Techniques for Web Content Accessibility Guidelines section 6.1.1 on text for images used as links, it provides an example where the alt attribute is used as the text equivalent for a link, rather than the title attribute.
So, what gives? If you were viewing the image represented by this example in Mozilla, the alt attribute text wouldn’t show up, as it (supposedly) uses alt and title attributes correctly – unlike IE.
Thus, someone viewing the page in a standards-compliant browser would not see any text information about whatever the image links to.
Moreover, in the next example, they interestingly use a space in the alt attribute text for an image that has visible link text with it. A space? What good does that do?
This would mean that anyone viewing the page without images turned on would have no idea what the image represented. This is fine if the image is just a design element, but what if it did represent meaningful content?
Of course, if you use a space in your alt attribute to represent ‘nothing’ (that is, the absence of a text equivalent) then, on mouse over, IE will show the space in the form of a tool tip which looks like an empty yellow rectangle.
Why not just use double quotes without a space, as in “”?
A Parting Thought
If there’s this much confusion over something as (supposedly) simple as alt and title attributes, how are we ever going to get to the bottom of the ambiguities and complexities of certain aspects of CSS?
It’s all a conspiracy man 🙂 Personally I tend to use both, simply because of the ie/moz difference in displaying alt/title text. I wouldn’t recommend leaving out either browser.
Jim, I guess my question would be then, what do you write in each? Is one just a duplicate of the other? If so, which one is the original and which is the copy?
Now you’re just trying to confuse me, providing a distraction whilst you remove the secret code from my DNA when I’m not looking.
But seriously, most of the time I just duplicate the same info for each attribute. That way all browsers get at least some kind of description, and nobody is favored with more or less info than anybody else.
I’m not sure if this is a best practise, but we’re generally not given a lot of choice or guidance in this matter, so I suppose it’ll do for now.