The alt and title attributes
When browser vendors bend the standards and implement something in a different way than what the specification states, they may cause problems, or at least confusion. One example of this is the way certain browsers, the most widely used being Internet Explorer for Windows, handle
alt attributes (popularly and incorrectly referred to as “alt tags”).
Alternate text is not meant to be used as a tool tip, or more specifically, to provide additional information about an image. The
title attribute, on the other hand, is meant to provide additional information about an element. That information is displayed as a tooltip by most graphical browsers, though manufacturers are free to render title text in other ways.
Many people seem to confuse these two attributes (just recently the question was raised on the Web Standards Group mailing list), so I’ll offer my opinion on how to use them.
The alt attribute
For user agents that cannot display images, forms, or applets, this attribute specifies alternate text. The language of the alternate text is specified by the lang attribute.
alt attribute (yes, it’s an attribute, not a tag) contains an alternative description, and is required for images and image maps. It can only be used for the
input elements (and the deprecated
applet element). For the
input element, the
alt attribute is meant to be used for graphical submit buttons:
<input type="image" src="image.gif" alt="Submit" />.
alt attribute to provide text for visitors who, for whatever reason, can’t see the images in your document. This includes visitors using browsers that cannot display images or have image display disabled, visually impaired visitors, and screen reader users. Alt text is to be used instead of an image, not as additional information.
Think carefully before writing alternate texts. Make sure that the text actually provides useful information to anyone not seeing the image, and that it makes sense in the context. For decorative images, use an empty string (
alt="", with no space between the quotes) as the value instead of specifying irrelevant alternate text like “blue bullet” or “spacer gif”. Don’t omit it. If you do, some screen readers will read the image’s file name, and text-only browsers like Lynx will display the image’s file name. This is rarely useful to your visitors.
The easiest images to write alt text for are probably those that contain text. In that case, the text the image contains is generally what should be in the
When it comes to the length of
alt text, here’s what the WCAG 2.0 says:
The ALT attribute value must be less than 100 characters for English text or the user must confirm that the Alt text is as short as possible.
I interpret that as “make it as short as possible, but as long as necessary”.
And don’t use the
alt attribute for text that you want to appear as a tool tip. It’s not the way it was meant to be used, and as far as I know, it only works like that in Internet Explorer for Windows and in Windows versions of the ancient Netscape 4.*. No Mac browsers display alt text as a tool tip.
When browsers display alternative text as a tooltip, they are encouraging misuse of the
alt attribute. Some people will write less useful alternative text because they tend to think of it as additional information, not as a replacement for the image. Others may not want the tooltips to appear, and completely omit alternative text. Both of these misuses of the
alt attribute makes things harder for those who cannot see the image.
title attribute for additional, non-essential information.
The title attribute
This attribute offers advisory information about the element for which it is set.
title attribute can be used with all elements except for
title, but it isn’t required for any. Maybe that’s why it’s less clear when to use it.
Use this to provide additional information that is not essential. Most visual browsers display title text as a tool tip when the element is hovered over, however it is up to the browser manufacturer to decide how the title text is rendered. Some will display the text in the status bar instead. Early versions of Safari did this, for instance.
One good use of the
title attribute is to add descriptive text to links, especially if the link text itself doesn’t clearly describe the link’s destination. This way you can help visitors know where the link will take them, possible saving them from loading a page only to find out it wasn’t anything they’re interested in. Another potential use is to provide additional information for an image, like maybe a date or other information that is likely not essential.
Title text can be longer than alt text. However, keep in mind that some browsers crop the text they display (as a tooltip or otherwise). Browsers based on Mozilla, for example, only display the first 60 characters of a title text in a tooltip. While that should likely be considered a Mozilla bug, it’s something you should be aware of.
Think before using
My advice is to keep alt text short and to the point. In the majority of cases, this should mean an empty string,
alt="" (again, no space between the quotes). Think about the image. What information does it provide to anyone looking at it, and how can you use text to provide that same, or similar, information to those who cannot see it? Does it really help someone who can’t see it to know that it’s a “Picture of the CEO standing outside the main building, wearing a gray suit with a black tie, and looking up at the sky.” If it does, go ahead. In most cases I find that an empty string is better.
title attribute is harder to give strict guidelines for. I use it mainly for links that aren’t self-explanatory, when several links on the same page have the same link text but different destinations, and sometimes to provide more information about something, like a button or a form control.
When an image needs a longer description than what is suitable for the
alt attribute, there are a few options.
longdesc attribute can be used to provide a link to a separate document that contains a textual description of the image. Doing so means linking people away from the current document, which may make it more difficult to comprehend. On top of that, browser support for
longdesc is inconsistent, and not very good.
longdesc attribute can contain a link to a section of the current document instead of to a separate document. In Accessibility footnotes, Andy Clarke has written a nice explanation of how that can be implemented.
D links can be used as an option to
longdesc. A D link (description link) is a regular link to a document containing alternative content. The link is placed next to the image in the document, and is visible to all browsers. Opinions of its usefulness vary though, and personally I don’t really like the idea. Neither does the Web Content Accessibility Guidelines Working Group – in the working draft of HTML Techniques for WCAG 2.0, D links are marked as deprecated.
If the long description of the image is of use to sighted as well as non-sighted visitors, you may consider keeping it in plain view in the same document instead of putting it in a separate document or otherwise hiding it. That way everybody can read it. A low-tech but foolproof method.
Give me more information
Want to read more about the
longdesc attributes? Start here:
- Guidelines on alt texts in img elements
- Writing good ALT text
- Accessible alternatives
- Accessibility footnotes
- The image problem
- Title Attribute – Your Take
- Using Link Titles to Help Users Predict Where They Are Going
- How to specify alternate text
- The title attribute
This article has been translated into the following languages:
Subscribe / follow
- Web Designer at Trinity Merchant Group (Arlington (Dallas/Fort Worth), TX, Te, US)
- (re)define our guts: FarmersWeb seeking Lead Web Engineer at FarmersWeb, LLC (New York, NY, Ne, US)
- Lead Web Applications Developer (PHP) at Use All Five, Inc. (Los Angeles, CA (Venice), Ca, US)
DreamHost web hosting
Use the promo code 456BEREASTREET3 to save USD 20 when you sign up for DreamHost