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.

Source: How to specify alternate text.

The 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 img, area, and 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" />.

Use the 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 alt attribute.

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.

Use the title attribute for additional, non-essential information.

The title attribute

This attribute offers advisory information about the element for which it is set.

Source: The title attribute.

The title attribute can be used with all elements except for base, basefont, head, html, meta, param, script, and 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.

The 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.

Longer descriptions

When an image needs a longer description than what is suitable for the alt attribute, there are a few options.

The 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.

The 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 alt, title, and longdesc attributes? Start here:

Translations

This article has been translated into the following languages:

Posted on December 8, 2004 in (X)HTML, Accessibility, Usability

Comments

  1. As always straight to the point and good info about accessability. Keep up the good work.

  2. Good advice, Roger. This is something lots of people don’t get right. And for once, it isn’t really Microsoft’s fault. :) Netscape started this, by making the ALT text visible in a tool-tip. Microsoft merely copied that behaviour.

  3. You should also write something about additional attribute LONGDESC. In my opinion it is interconnected with these two attributes. Thanks for this post, I am going to link to it.

  4. Do you realize that only web designers still speak of Netscape 4? I know that what you’re making here is a historical reference, but I’d rather have as little mention of Netscape 4 as possible, because it mental-blocks the exploration of contemporary web technologies in some people. If some people remember that someone might still use NN4, they say NO to CSS layout and JavaScript… it’s a shame ;-)

  5. As far as I’m aware the specs don’t give specific implementation advice to the browser manufacturers. As such I don’t think you’re right to say that “Alt text is not meant to be used as a tool tip” as it’s kind of down to the browser manufacturers to decide how they handle this.

    For instance there is nothing in the spec that says that titles should be rendered as tool tips by browsers. It just happens that this is the way a large number of browser manufacturers have chosen to approach titles.

    That being said, I basically agree with the gist of your argument. I just don’t think it’s necessarily fair to imply that IE goes against the specs when in this case I don’t feel that they do.

  6. December 8, 2004 by Roger Johansson (Author comment)

    dusoft: Yep. I’ll look into adding some info on that.

    Gabriel: I rephrased a couple of sentences to reduce the chances of that happening ;-)

  7. I personally like to point people to the Mozilla Web Author FAQ on alt “tooltips”

  8. December 8, 2004 by Roger Johansson (Author comment)

    Andy: How the alt text is displayed is up to the browser manufacturer, but the specs clearly state that it’s meant to be used when an image cannot be displayed. That’s where I feel IE gets it wrong, since it displays the alt text even if the image is displayed.

    Oh, and if you read carefully you’ll see that I mention that browsers don’t necessarily render title text as tooltips ;-) Like you say, there is no requirement for browsers to do so. I’ll edit the article to make that a bit clearer.

    Anne: That’s a good explanation of the potential problems.

  9. “But the specs clearly state that it’s meant to be used when an image cannot be displayed.”

    Which IE does. However I don’t see any problem with IE also displaying the alt text as a tool tip. In fact It can be quite a handy way of checking to make sure alt text has been added. As such I don’t think you can say that alt text is not meant to be used as a tool tip, from the browser perspective at least.

    I would agree that if a developer wishes to show additional information about an image in the form of a tooltip, using the title attribute would be the “correct” way to do this in the majority of browsers.

    I’m probably just in a pedantic mood this morning but I do think in this case it’s reasonable for IE to show alt text as tool tips and shouldn’t be considered as a bug or a flouting of the spec.

  10. Precisely, if the contents of the ‘alt’ attribute are displayed similar to ‘ToolTipText’ when the image is rendered it becomes a nonsense the recommendations mention “…when the element cannot be rendered normally.”

    Since the image is rendered content when physically loaded and thus potentially visible/accessible to the liveware displaying the ‘alt’ attribute in tandem would be counterproductive.

  11. For decorative images, use an empty string (alt=”“) as the value instead of specifying irrelevant alternate text like “blue bullet” or “spacer gif”.

    Maybe it’s just me, but shouldn’t your mark-up only contain useful images. ‘Decorative’ ones should be in the CSS. /perfect world

  12. [11]: not always possible as you surely know.

  13. Dusoft mentioned a need for LONGDESC clarification. You posted Malarky’s “Accessible alternatives” article, but his followup “Accessibility footnotes” has a great discussion about LONGDESC; I don’t think that’s an attribute used enough for it to require another analysis at this point.

    The IE tooltip debate going on here is an interesting one. I think it is a good idea to use alt as a tooltip. Sites like Yahoo! News Photos make good use of this - using title would be redundant. There’s an interesting discussion on the “Popup ALT Attributes” Firefox Extension thread, although it’s not quite as… informed, shall I say, as this one (thom makes a good point similar to mine, though).

  14. Hi:

    I have been lurking on this blog for a couple of weeks now and I am very impressed with the content.

    Regarding the current topic: the W3C states “The alt attribute specifies alternate text that is rendered when the image cannot be displayed (see below for information on how to specify alternate text ). User agents must render alternate text when they cannot support images, they cannot support a certain image type or when they are configured not to display images.” but in my “research”, I could not find anything that states alt text should not be displayed as tool-tips. However, I am certainly of the opinion that it should not because by extension from the above quotation, it should not be displayed if the graphic can be displayed. Furthermore, it leads novice designers/developers to use it for tool-tip-type information rather than an alternate to the image.

    Agreed, it is useful to check for the presence of alt text unless of course, you use either Firefox or IE with one of the accessibility or web developer extensions/toolbars which also enable you to check alt text.

  15. Hmmm, guess I should also have read the posting guidelines.

    Sorry,

    Jules

  16. December 8, 2004 by Roger Johansson (Author comment)

    Jules: Thanks :)

    No, I don’t think any specs state that it’s forbidden to display alt text as a tooltip. They do state that alt text should be used as an alternative when the image cannot be displayed, so displaying both the image and the alt text makes no sense.

    Anyway, the whole point is that browsers displaying alt text as tooltips has led many a web developer to learn yet another bad practice, inserting text that makes no sense when actually used as alt text, or using empty alt texts to suppress the tooltip in IE/Win. This is described well in the Mozilla guideline Anne linked to in comment #7.

    Oh, and I fixed your comment. :)

  17. December 9, 2004 by Joris

    I think the problem goes beyond IE and should be addressed at HTML authoring tools, many of which provide easy ways to add ‘alt tags’ but no way to add a title attribute. There is going to be little change on the part of web developers until the tools we use make it easier to do the right thing.

  18. A minor point with regard to using empty alt attributes for decorative images. I would recommend against putting a space in between the quotes, as in your example: alt=” “.

    IE will display this as a blank tooltip which looks rather odd and could be confusing for users.

    Better to not put anything in - i.e. alt=”” (no space inserted).

  19. December 9, 2004 by Roger Johansson (Author comment)

    Christian: Right. That’s why there is no space in either of the examples ;-) Are you really seeing a space there? Anyway, I’ll update the text to make sure nobody thinks there should be a space.

  20. Andy and Jules (nice seeing you here): it’s a matter of interpretation whether or not ALT text may be displayed along with the image itself.

    However, there is a strong argument against showing ALT text in a tool-tip. A text equivalent is usually not what you want to show in a tool-tip; you want to display some additional information. People who think that IE is doing it right often write very poor ALT texts that don’t make any sense when images aren’t displayed.

    Even if IE and old Netscape aren’t violating the standards, which is arguable, they promote bad practice and are detrimental to accessibility. That’s why Roger’s article is important.

  21. Roger, thanks for the info. I never really thought about the correct usage of these tags, however I was wondering when I switched to a Mac a couple of years ago, how come the Mac browsers do not show alt-info as a tooltip - blame my bad Windows background.

    Your page goes to my NetNewsWire list!

  22. Roger, on closer inspection I can see that there is no space in your example. It just looked that way. Sorry for the unwaranted criticism.

    It’s good that you updated your text to make this clear though, in case others were equally fooled.

  23. December 9, 2004 by David Salahi

    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.

    Hmm, well if the image is of a CEO standing outside… why shouldn’t the alt text say that? Lots of images don’t really provide any particularly useful information but are there as decoration. As such, they give a site some “look and feel” or style. Shouldn’t the image-free browser be given that same info? It’s no more or less useful to him/her than it is to the browser with images, is it?

    Perhaps a textual description of a superfluous image could be considered noise by someone using a text reader. But that’s kind of a judgment call.

  24. December 9, 2004 by Kristin

    I´ve come across a problem with the title attribute, and that some browsers, for example; Netscape, Mozilla and Firefox, doesn´t take more than about 70 letters. After that it shows (…) for the remaning text. Why is that? Instead of making javascript hiding and layers for help-text it´s much more easier with the title attribute that works fine on IE for longer descriptions.

  25. December 9, 2004 by Roger Johansson (Author comment)

    Kristin: It’s up to browser manufacturers to decide how much text to display. Not sure why the Mozilla browsers have a cutoff point at around 70 characters. It does seem a bit short. Safari and Opera both display much more text. I’m not sure if they limit the length at all. I just pasted a whole page of text into a title attribute, and Safari displays all of it.

    If I remember correctly, there is some discussion among Mozilla developers to change the cutoff point. Anyone reading this know more about that?

  26. David [23]: The judgement call about describing essentially aesthetic elements should be the user’s, in this case the user of a screen reader.

    Our eyes may process this stuff out of the way quickly but remember that the user with a screen reader has to hear everything which (1) means it takes longer to get to the content and (2) adds the cognitive load as they are being overwhelmed with all this information.

    At WebEssentials04 we were lucky enough to have some presentations on accessibility, including a live demo with a screen reader. It is quite amazing to see the things in practice, and the difficulties with keeping up with a whole page being read out.

  27. 13:

    I don’t think Yahoo make good use of alt tooltips actually. Take this alt text for a picture of a human skull on the Yahoo link you provided:

    “This X-ray picture shows a 5-centimeter nail stuck in an unidentified South Korean patient’s skull Thursday, Dec. 2, 2004. According to a Seoul hospital, doctors found the nail after the man came to the hospital, complaining about a severe headache. They speculate that the nail stuck in the man’s head four years ago in an accident but the man didn’t know about it. The nail was removed in a surgery last Saturday. (AP Photo/Yonhap). (Click for Large Photo)”

    The first mistake Yahoo have made is to treat alt text as a general way to produce pop-up captions. Now it may be odd for a blind user to be using a site named Yahoo News Photos but bare with me - imagine if a blind reader had to listen to all of that being read, multiplied by each of the photos on the page. Wouldn’t it be better if they could just hear a snippet, and then chose to listen to more information contained in the title attribute if it is of interest?

    The second mistake Yahoo have made is to rely on the tooltip implementation of alt text in IE. As stated in this blog post, no other browser works like this so that means about 10% of users don’t get a caption for the images. Furthermore, since tooltips are designed for short pieces of information (hover over the windows start button or clock for example), the tooltip in IE doesn’t display long enough to even read it!

    IMHO, what Yahoo should do is provide the first sentence as alt text, such as “X-ray picture shows a 5-centimeter nail stuck in an unidentified South Korean patient’s skull” and provide the full caption using the title attribute - and use some sort of DHTML, like Nice Titles, to increase the amount of time the caption is displayed.

  28. In order to prevent IE from showing the ALT text as a tooltip, you can add an empty TITLE=”” property to the element. It might be a bit redundant, but semantically I don’t see anything wrong with it.

    What’s your opinion on this little workaround?

  29. Roger, the Mozilla thing is bug 45375.

  30. What really bothers me is people who don’t use the cite-attribute on blockquote. If the source is known, this should always be used. In my opinion, not using the cite-attribute on blockquote is just as bad as excluding the alt-attribute on img, area, input and applet.

  31. December 13, 2004 by Roger Johansson (Author comment)

    Björn: I don’t think adding an empty title attribute would cause problems for anyone. If anyone knows any different, speak up ;)

    Greg: Thanks. That’s what I was thinking of. After reading the comments over there, I find it really odd that something like that hasn’t been fixed after what, four years. Amazing.

  32. January 6, 2005 by Quadra Solutions

    Thanks for the informative guide above.

    You mentioned the “longdesc” for longer descriptions. How does its use affect search engine rankings? Do bots treat it the same way as an “alt” attribute while calculating PR?

    Again, many thanks.

  33. What good is an empty alt or title attribute? Someone suggested using an empty value for an alt attribute (alt=” “). I disagree, it doesn’t make sense doing that.

  34. January 19, 2005 by Roger Johansson (Author comment)

    Edgard: An empty title attribute isn’t much good, but an empty alt attribute should be used for images that are purely decorative. The reason is that for someone not seeing the whole page, a description of a decorative image is just noise (e.g. “red bullet”, “top left corner”, “blue dotted arrow, slightly curved”).

  35. Roger,

    For decorative image elements I prefer to use them as background images of other elements, and for list elements I also prefer to override the list style if I need to use a graphic bullet. That way you don’t need to provide an alt attribute for those decorative elements. All of this is acomplished with stylesheets, completely separating the design from the content.

    And if I add an image as part of my site’s content the alt attribute is required as it forms part of the message.

    That’s why I think empty alt attributes shouldn’t be used.

    What do you think? I’m using this technique on my website after seeing its use on csszengarden.

  36. January 19, 2005 by Roger Johansson (Author comment)

    Yes, if all of your decorative images are background images and all img elements contain images that are part of the message, they should have a descriptive alternative text.

    However, in some cases it may not be practical to keep all decorative images in the CSS, and that’s where empty alt attributes are appropriate.

    Your approach is very good though, and ideally all decorative images should be kept out of the markup.

  37. Excellent article and posts.

    I would like to add that when needing a blank alt tag, please use two spaces within the quotes.

    alt=”  ”

    This allows those using a Reader program (i.e., Blind people) to ignore it. If you use none or one space, the Reader will say “blank” and, after a while, can become monotonous if used a lot.

  38. January 30, 2005 by Roger Johansson (Author comment)

    Rob: On the contrary, an empty alt attribute should be just that, empty. No spaces, nothing, just this:

    alt=""
    

    Otherwise, it may cause probems for screen readers. More info:

  39. April 13, 2005 by Andrew

    Thanks for that. I never actully knew about the title thing. It may come in hand one day.

  40. In the diferent versions of internet explorer this page always put diferent characters, fonts!!!!!!Is there a problem with CSS?What shall i do? Can you help?

    Hug

  41. October 14, 2005 by Chip Adams

    Is it possible to control the ammount of time it take for the title attribute to display? It seems to me about 1000 ms currently but I would like to shorten that to 500 ms or 100ms. Any ideas?

  42. October 15, 2005 by Roger Johansson (Author comment)

    Chip: Nope, not unless you use JavaScript to create your own tooltips, which I wouldn’t recommend.

  43. Roger,

    good article, but you should practise what you preach:

    “Source: The title attribute.”

    doesn’t say anything about the source. Is the source the title attribute itself? How can it possibly write? And the “title” information consists to 50% of a repetition (“The title attribute, from the HTML 4.01 Specification”).

    Better:

    “Source: www.w3.org” - with

    title=”World Wide Web Consortium (W3C) develops web specifications, guidelines, software and tools”

    …my two cents only.

  44. November 10, 2005 by Roger Johansson (Author comment)

    Jens: The quote is from a section in the HTML 4.01 specification titled “The title attribute”. The link and title texts could probably be rephrased, but I don’t agree that “World Wide Web Consortium (W3C) develops web specifications, guidelines, software and tools” provides any useful information in this context.

    Maybe something like this would be better:

    Source: HTML 4.01 Recommendation, 7.4.3 The title attribute.

    That link text would not need any further explanation in my opinion, so the title attribute could be removed from the link.

    …my own two cents ;-).

  45. Hi Roger,

    thanks for your reply, and, yes, I agree with your proposal.

    Yet another demonstration that 4 cents can buy more than two times two on their own…;-)

  46. April 10, 2006 by Siva Ramakrishna

    hi,

    Could you please help me in the following scenario?

    i have a drop down on my homepage. As the width of the drop down is less, the options are not being displayed entirely. I want a tooltip functionality for the options of the dropdown.

    How do I achieve it in either HTML or Javascript?

    The application I am working on is Teamsite.

    Please send me the response as early as possible.

    Thanks, Sivaramakrishna.

Comments are disabled for this post (read why), but if you have spotted an error or have additional info that you think should be in this post, feel free to contact me.