The alt and title Attributes

alt and title provide additional information about the image. The browser uses alt/title in a couple of different ways:

• The alt text is displayed in place of the image if the image cannot be displayed. This can occur if:

  • The browser is unable to find the image.
  • The user has disabled image loading in his/her browser.
  • The user is using a browser such as Lynx that does not support images at all.

• The alt text may be displayed in place of the image while the image is being loaded. The image replaces the alt text when the image arrives.

• Newer browsers (MSIE 5+ and Netscape 4+) display the alt text in a small popup when the mouse hovers over the image.

• In an aural (speaking) browser, the alt text is read to the user. In the absence of alt, the browser may read the URL from the src attribute to the reader.

alt is defined as a required attribute, and the validator will report an error if you don't include it.

MSIE 4 erroneously used title instead of alt. If you want your alt text to show up in MSIE 4, you need to include both title and alt with identical text in both. MSIE 5 recognizes both alt and title. If both are included, MSIE 5 uses alt rather than title.

Here is an example of an image that includes an alt tag and one that does not. If your browser is one that supports alt popups, let your mouse hover over the image and notice the popup text that appears.



This image has an alt attribute specified.



This image does not have an alt attribute specified.

What sort of text should you include in alt?

If you think of alt as primarily providing additional description about the image that is going to be displayed as a popup while the user views the image, you might think that you'd want to provide supplemental information about the image. However, the real usefulness of alt is for providing a description for those users who cannot see the image — your blind visitors using an aural browser, and your users whose browsers don't support images or who have disabled images. Provide a brief description of the image for these users.

For images that are solely decorations or for invisible images that are used solely for spacing purposes, you don't want to provide any alt text. Your visitors do not need descriptions of these, and any such description will just be disruptive. For these images, specify alt="". This satisfies the requirement that alt be present, and also stops aural browsers from reading out the image's URL to the listener.

For an excellent discussion of alt text, see the WDG article Use of ALT text in IMGs (this link opens in a new window). This article gets a bit technical at times, but provides some excellent insights on making your sites accessible to blind people, people with motor difficulties and other disabilities, as well as to users of text-only browsers.