On combining title and alt on images

Henny mentioned the MAMA results of uses of alt and title text on images.

Opera MAMA early results: of a small sample of 5000 URLs Title and Alt used together in same IMG element 720 times. A pet peeve of mine.

When I queried this she responded:

@dorward No to TITLE + ALT, it duplicates info for some screen reader users http://snipr.com/hzpt8 We’ll check for duplication in next crawl

I can’t imagine any circumstance where the alt text should be the same as the title text — since the alt should be an alternative to the image, the title shouldn’t be able to add any information to that which is already expressed by the image.

If there was duplication, then I’d agree with Henny that it is a bad bit of markup; sometimes repetition can help get an important point across but image metadata is not the place to do this.

Hopefully the duplicate text check crawl that she mentioned will not have a high number of matches (my cynical side is telling me that this isn’t a hope I should cling to). I’ll be keeping an eye out for the results of that.

It does raise a question thought — if alt and title were to both appear on the same image, what should they contain?

Let us see what the specifications have to say about title and alt.

Let’s deal with the alt attribute. This is nice and simple.

HTML 4.01 says that alt is for an alternative to an image for when the image is not available (and is mandatory).

The use of alt text seems obvious enough to me, but perhaps that is because I’ve been writing it for years. The HTML5 draft has a detailed collection of use cases with examples should you be interested. The late Alan Flavell wrote an excellent guide to using alt text some years ago; it includes a wondeful set of examples of what not to do.

So, given that alt is relatively simple. What about the title attribute? HTML 4.01 says that title is for advisory information about an element, but is rather short on detail or examples of what that actually means. Let us look to the HTML5 draft for guidance.

It starts out with the basics, and retreads the ground covered in HTML 4.01.

The title attribute represents advisory information for the element, such as would be appropriate for a tooltip.

We then have some specific guidence for different types of elements, including images.

it could be the image credit or a description of the image

I hadn’t considered using it to provide a credit for the image, but it does seem to be a reasonable idea. It allows, for example, credit to be provided for an image that is used decoratively without breaking into the flow of text.

Using it for a description of the image seems a little odd though. We already have the longdesc attribute (even if we see little support for it in browsers). Why would one use the title attribute instead?

A little examination of HTML5 and I find:

There has been some suggestion that the longdesc attribute from HTML4 should be included. This has been considered and rejected in the past, but if new evidence is found showing the attribute to actually help users rather than harm them, it may be reconsidered.

So, it looks like HTML5 is dropping the attribute that allows a description to be expressed in markup (allowing paragraphs, emphasis and so on) for one which allows simple text strings.

I don’t understand how the attribute is harmful; if anyone has a summary of the reasoning behind this decision, then please let me know.

What other advisory information could be provided about an image?

Ian chipped in with the observation:

@dorward I see title overused more often than underused. Have Read guidelines which said an image without alt should have a title. Erm, no.

I can just about see a use case here. If we read “without alt” to mean “with blank alt text”, then I am reminded of several instances where I have read that screen users complained that their software informed them that there was an image but that as it lacked alt text they had no idea if it was important or not. Given that, I can understand the benefits of:

<img src="http://images.dorward.me.uk/importedFromSBuilder/example.png" alt="" title="This is a decorative image">

I don’t like it though. It feels too much like a crutch to reassure screen reader users that the author isn’t making the mistakes that some other authors make, and it creates tooltips for many other users who are left wondering why they exist.