Titles and alternative text for images

What is the difference between the alt and title attributes for the <img /> element in XHTML and HTML? Do you know?

The fact is that many, if not most sites on the WWW are created with erroneus or lacking use of alt and title.

Many websites either fail to provide an alternative text at all, or provide one that is not suited, or they may even provide an alternative text that would be better suited as a caption, or within the title attribute.

This documents aims to teach how to compose proper alternative and advisory text for images.

The purpose of alt text

The primary purpose of the alt text is to provide alternative, textual content when an image cannot be rendered. It is there to provide users that do not see the image with replacement information, so they can make sense of the document.

Alt text is not a tooltip

Internet Explorer renders alt text as a tooltip. Browsers treat alternative text differently. Non-visual browsers such as Links and Lynx simply display the alt-text in place of the image, while a talking browser would typically read out the alt text.

Typically, graphical browsers do not render or show the alt text when the image is available. This does not, however prevent a browser from doing so. Internet Explorer will render the alt text as a tooltip when no other advisory information is present for the image, typically the title attribute.

Sadly, the fact that a browser may render the alt text as a tooltip, has caused many authors to regard the alt text as a tooltip, advisory infomation only. The alt text should generally be regarded as primary content, and treated with the same care you would treat other textual content on the page.

If you want content that is strictly advisory to an image, a tooltip that displays when a user hovers over an image, the title attribute is better suited.

Use meaningful alternative text

Images can be an integral part of your text, providing information that is necessary to put the text in it's proper context. Or images could very well be the content, with text to provide additional information. You, the author, should carefully consider what your images are when you write the alternative text.

If the author writes bad alternative text, it might look or sound bad. Consider the following example:

[Image of book cover. 2001 - A Space Odyssey. '2001.jpeg' (14kb)]. Written when landing on the moon was still a dream, made into one of the most influential films of all time, brilliant, compulsive, prophetic, 2001: A Space Odyssey tackles the enduring theme of man's place in the universe.

On the moon an enigma is uncovered. So great are the implications that, for the first time, men are sent out deep into the solar system. But before they can reach their destination, things begin to go wrong, horribly wrong ...

The example shows common, but very bad usage of alternative text. The information in the alternative text does not have any value to the visitor who cannot see the image. If the alt text is read out aloud, the punctuation, parantheses and quote marks will make a talking browser sound like it's either stuttering or about to crash.

Furthermore, the alternative text gives information that is unneccesary for a visitor who doesn't see the image. If there is an image there which the user don't see, he or she generally won't need to know it is an image.

Also, since the example did not contain a link to the image, it is unlikely that the visitor will download it. He or she would need enter the URL manually, Users generally won't do that if they can avoid it. Thus, telling the user the file name and file size is unneccesary.

So, how should an alt text for an image be composed? This depends on the context and purpose of the image. Below are two suggestions that might be appropriate.

Solution 1: Decorative images

If your image is purely decorative, and serves no other purpose than to relieve a user with images turned on from viewing large, monotonous blocks of text, the image is said to be decorative. Users unable to see images don't need information that serves no purpose, so writing an alt text for these images is harmful.

Keep in mind that the alt attribute is required, which means you have to include it. If you fail to do so, non-graphical browsers will generally display the filename of the image, or a placeholder that simply states it is an image: [Image].

The correct solution in these cases is to set an empty alternative text: <img alt="" src="decoration.png" width="36" height="36" />. This will prevent browsers from displaying garbage - typically console-based browsers like Links and Lynx will not leave any visual hint of an image at all.

Solution 2: Images that are content, or part of content

An image and the information carried within it may also have importance to your presentation, it may be an integral part of your document. It is then important to write an alt text that as naturally as possible may serve as a drop-in replacement for the image. Consider the following example:

Arthur C. Clarke: 2001 - A Space Odyssey. Written when landing on the moon was still a dream, made into one of the most influential films of all time, brilliant, compulsive, prophetic, 2001: A Space Odyssey tackles the enduring theme of man's place in the universe.

On the moon an enigma is uncovered. So great are the implications that, for the first time, men are sent out deep into the solar system. But before they can reach their destination, things begin to go wrong, horribly wrong ...

Arthur C. Clarke is one of the truly prophetic figures of the space age ... the colossus of science fiction - New Yorker

In this example, the image is part of the content. The cover of Arthur C. Clarke's 2001 - A Space Odyssey tells the reader which book the text is about, and who wrote the book. The alternative text gives the same information as the picture does. This doesn't mean that every word on the cover needs to be repeated, just enough to set the context for the rest of the text. The alternative text provided in this example, would look (or indeed sound) like this to someone with a non-visual browser:

[Arthur C. Clarke: 2001 - A Space Odyssey.] Written when landing on the moon was still a dream, made into one of the most influential films of all time, brilliant, compulsive, prophetic, 2001: A Space Odyssey tackles the enduring theme of man's place in the universe.

On the moon an enigma is uncovered. So great are the implications that, for the first time, men are sent out deep into the solar system. But before they can reach their destination, things begin to go wrong, horribly wrong ...

Arthur C. Clarke is one of the truly prophetic figures of the space age ... the colossus of science fiction - New Yorker

Title provides additional information

The title attribute may be a bit daftly named, since it has purposes besides providing a title for an image. The title attribute offers advisory information about the element for which it is set.

Sometimes, when you create an image, you may want to provide your readers with information relevant to the picture, but that is meaningless or redundant if the image is not visible. In these cases the title attribute can be used.

Browser stats for Virtuelvis.com, January 2003
Internet Explorer: 60%; Opera: 26%; Netscape: 7%; Other: 7%.

If you are browsing this document using a visual browser, you just saw a pie chart showing the browser statistics for the month of January, 2003. If you were viewing it with images off, it would have looked like this:

Browser stats for Virtuelvis.com, January 2003
Internet Explorer: 60%; Opera: 26%; Netscape: 7%; Other: 7%.

Using a visual User-Agent, you may have seen the following additional information if you hover the mouse pointer over the image:

Pie chart showing browser usage at virtuelvis.com.

If someone don't see the image in question, this information is meaningless. It adds nothing to what they have already read. This is conditional meta information.

That the title is meta information does not mean you shouldn't take care when composing it. Imagine this: If you indeed did see the image, but was unable understand it, what additional information would you need to understand it?

Not understanding an image you see could be due to a number of things, ranging from issues like display sizes to users with disabilities impairing what or how they see. Such disabilities could be color blindess or bad eyesight. Alternatively, the image could be so complex an explanation will benefit everyone who sees it.

In the last case, you should also consider writing an in-depth textual version of what you see in the image. If we review the browser statistics example mentioned earlier, this could be creating a table which replicated the information in the pie chart. You could either create this as a separate document, or as supplementary material in the current one.

Internet Explorer renders alt text as a visual tooltip.Another example: In the very first image in this article, the IE rendering of alt texts (repeated here for convenience), you will see that the title text explains both what the image is, and what is missing. Remember, most of the pie chart is missing. Information that the reader might want, or in some cases need, even if it is not normally required.

The Future: A more advanced alt

If not changed from the current draft, XHTML 2.0 will no longer include <img />. It will be replaced by the more generic <object> element, which can cater for other media types as well. This provides us with more advanced, and semantically rich ways of constructing alternative texts.

If we review the browser stats chart that was presented earlier, the alternative text had to be provided as a simple list. Presenting the statistics as a table would be more natural, and perhaps even neccesary if the pie chart contained more elements. The <img /> element cannot contain markup, so presenting it as a table is impossible.

Using the <object> element an author could have provided the image with a simple fallback mechanism that rendered using semantically rich markup. Example:


<object type="image/png" »
        data="browsers.png" »
        title="The pie chart shows browser usage »
        at virtuelvis.com" >
  <table>
    <tr>
      <th>Browser</th>
      <th>Percentage of visitors</th>
    </tr>
    <tr>
      <td>Internet Explorer</td>
      <td>60</td>
    </tr>
    <tr>
      <td>Opera</td>
      <td>26</td>
    </tr>
    <tr>
      <td>Netscape</td>
      <td>7</td>
    </tr>
    <tr>
      <td>Other</td>
      <td>7</td>
    </tr>
  </table>
</object>

Ideally, if a browser is unable to display the image, the table should be rendered instead. The result might resemble this:

Browser Percentage of visitors
Internet Explorer 60
Opera 26
Netscape 7
Other 7

While even the current standards permit this use of the <object> element, many browsers make a mess, either of the <object> content itself, or they have problems rendering the alternative content.

Opera 7 will display the image, but when you turn off images, the alternative content is not shown, but a non-informative image placeholder stating this is an image: [Image]. This is something that broke in Opera 7 - Opera 6.05 will treat alternative content for <object> correctly.

Mozilla will render alternative content, but you may experience difficulties with styling the alternative content.

As for MSIE, it doesn't render <object> very well, creating scroll bars where none are neccesary. Also, testing your alternative content is a pain, since Microsoft regards <object> as ActiveX. This means you will have to disable ActiveX to view your alternative content.

What you see below is what your browser makes of <object>, and content within it, if it cannot render the PNG.

Browser Percentage of visitors
Internet Explorer 60
Opera 26
Netscape 7
Other 7

Acknowledgements

This tutorial is based on work from Karl Ove Hufthammer's Norwegian-language article Alternativ tekst i XHTML (Alternative text with XHTML). Acknowledgements also go to Alan J. Flavell for his article Use of ALT texts in IMGs.

Feedback from several of participants in comp.infosystems.www.authoring helped me improve both the structure language of this document.