Title Attribute -- Your Take
July 28, 2004 | 
31 Comments
Ah, the little used “title” attribute. It’s a tricky little bugger that seems like it could be very helpful — but can it also bring a level of annoying redundancy?
I’m really curious to hear how others view the title attribute. I don’t use it much anymore, but I used to and I’m rethinking the best way to use it on my sites. What made me change my mind originally was hearing how a site with many title attributes sounded through a screen reader.
There was lots and lots of repetition, actually adding to the confusion rather than helping at all. I’d originally started using them to help those very people I was probably now annoying. My guess is it was more in the implementation than anything.
It seems that in many cases titles might help from a usability standpoint and at the same time hinder from an accessibility standpoint. With images for example: do you need an title attribute if you’ve got an alt attribute specified? I don’t think so.
Maybe it’s how and when they are used that’s the problem. If they are just repeating the text in a link, and there is no further information about that link needed, you shouldn’t use a title attribute for that link, right?
Here’s what Jakob thinks about titles for links. Seems reasonable. What do you think? Do you use the title attribute for links? What about for images? When do you think they should be used and when do you think they’re redundant?
Filed under: Web Development
Comments
1. Chris Pederick said:
I have no idea how this affects screen readers - it sucks if it messes them up - but I use title attributes for both images and links.
“do you need an title attribute if you’ve got an alt attribute specified? I don’t think so”
Remember that the alt attribute doesn’t popup as a tooltip (because the specification says they shouldn’t, I believe) in browsers such as Firefox, so omitting the title attribute can leave the user unsure as to what an image is or does.
Posted on July 28, 2004 03:25 PM | #
2. Keith said:
Chris – I wondered how long it would take for someone to hit upon the crux of this issue. This is exactly why I brought this topic up. To me (and if I remember right, to screenreaders) it seems extremely redundant to have both an alt and title attribute for images.
If you look closely at this site, I’ve done different things in different spots because of this. I’d like to nail it down and be consistant, but I guess I don’t know what the best way is! ;)
Posted on July 28, 2004 03:32 PM | #
3. MacDara said:
I use the title attribute for my permalinks (to let users know what the link is and where it’s going) and for short comments on external links. The latter of these is probably not what was intended when the idea was first drawn up, but for me it comes in very handy, especially for annotating my linklog links. It’s a way of conveying parenthetical information without committing it to unnecessarily formal text.
Posted on July 28, 2004 03:33 PM | #
4. MacDara said:
Regarding the image question, though: in browsers other than IE, at least on the Mac, alt text doesn’t display upon mouse hover, but title text does. So the title attribute may be redundant for this purpose for Windows users, but not for everyone.
Posted on July 28, 2004 03:38 PM | #
5. Matthew Farrand said:
Like many other aspects of web design, titles can be used and abused.
Many links don’t need titles - they show where you’re going and do so concisely. Adding titles would make no point and would help no one. In a similar vein, many images these days have titles where a caption would probably be better.
On the other hand, well used titles can help both usability and accessibility. If you use thumbnails to link to a larger image, it’s best to use the alt text for what it’s meant to be used for - an alternative to the image - and use the title attribute to tell people that they can follow the link.
I think Zeldman uses titles extremely well in the “Of the moment” section in his site. The link titles always seem to add useful information without clutttering up the site.
As with so many other things, it’s how well you use the title attribute that matters, not how often you use it.
Posted on July 28, 2004 03:49 PM | #
6. Dave S. said:
It goes like this:
Alt text: “Fruit still life”
Title text: “Pears, apples, and bananas in a dish, lit from the top right with a soft focus.”
Longdesc: “Three pears, two apples, and a bunch of bananas resting within a round dish. A russet velvet sheet fills the background, while the surface the dish sits on is covered with a lace tablecloth. The scene is lit from the top right, though the flash shines off the apples from the middle left. The focus is soft and the overall tone is dim. This scene was shot for ‘Martha Stewart Living’, December 2002.”
Though browser support of longdesc still has a long way to go, the idea is this: Alt text is purely a short placeholder for the image if it doesn’t load; it should never be displayed otherwise (not even on mouse hover.) Title text is meant for a longer description of the image, which may be displayed in other ways (including hovers). Longdesc is meant for an extended description of the photograph including as many details as the author wishes to publish.
All are meant to be assistive, but they’re not only for screenreader use; Lynx, for example, makes use of Alt text because it simply doesn’t load images.
Posted on July 28, 2004 03:59 PM | #
7. Fernando Dunn II said:
For links: A) When the link text is self explanatory or if you can decipher where you’re going from the browser’s status bar, I don’t think titles are neccessary. B) When something as popular as this is done, it may be neccessary to add a title to describe what you’re clicking on.
We do have to keep in mind the people who may rely on certain things to enhance their browsing experience. What I mean is that only people who regularly view blogs would think to themselves “if I click this commenter’s name, I can go to their site.” So sometimes we should help these folks out. I myself can testify that viewing a title of a link came in handy when I was on dial-up internet. It allowed me to save myself the headache of loading a page only to find it wasn’t what I thought it was.
For images: I always use alt (as it is required for XHTML Strict) and sometimes I use the title. Mostly my titles and alts don’t make much sense or aren’t descriptive enough. Dave kinda refreshed some basics in his comment though. While my site is still small, I think I need to go back and start using some constants.
Posted on July 28, 2004 04:30 PM | #
8. Christian Watson said:
Dave - your explain perfectly how these attributes *should* be used.
However, the question in my mind is how does a screen reader deal with an image that has both alt and title attributes. Would it read them both aloud?
If so, would it be better to lose one of them in order to work better with screen readers?
Posted on July 28, 2004 04:36 PM | #
9. Keith said:
Dave – Thanks for the explanation. It’s a good one for images, but Christian brings up a good point. Say you have redundant information in your title, do you loose the alt attribute? Same goes with longdesc. Is this simply a browser issue?
Another question for everyone in regards to images. Should you even have text in your alt attribute if the image is simply decorative? What about something like a photo that’s not informational and just for show. Maybe that’s a topic for another day….
Posted on July 28, 2004 04:57 PM | #
10. Chris Pederick said:
I feel a Cederholm SimpleQuiz coming on…8o)
Posted on July 28, 2004 05:03 PM | #
11. Fernando Dunn II said:
As far as I know (and in current IE, Opera, and Firefox for PC), when the alt and title are declared, the browser will show only the title upon mouse-over. The title only displays in “tooltip-like” situations. The alt displays in place of the image until it is loaded. This is also true for using “Hide Images” options such as that in Opera. Only the alt content will show.
I can’t speak for all browsers, but it might be the same.
I’d also like to mention that some browsers show the title when you view an image’s properties.
Posted on July 28, 2004 05:36 PM | #
12. Derek Featherstone said:
As always, good questions to be asking, Keith.
Title attributes can be useful, however, in my opinion they are overused. I wrote up a piece on it a while ago (Contradictions in Accessibility: Hidden Information. Summary, in case you don’t want to follow the link: We often try too hard to make things accessible by adding hidden text or other information via title attributes, longdesc etc, rather than opting for a low tech approach making the information available to all users.)
One of the biggest problems with title attributes is that you have to physically hover the mouse over the link. Tooltips don’t show for keyboard users. I am one, by choice. I understand there are space and aesthetic considerations that need to be balanced. Matthew Farrand in comment #5 illustrates this perfectly:
My initial thought is that if it useful information, it should be exposed to all users, not just those that hover with the mouse, or those that just happen to have their screenreaders to read titles (it is usually a user preference in the screenreader software after all). Mark Pilgrim’s b-links, strikes a good balance to me, where space is a concern – on Mark’s main page, he puts his commentary in the title attribute, but backs it up with his commentary in plain view on his b-link archive pages - nothing hidden in a title attribute, just plain old text.
As for screen reader preferences, I’ll give one example from JAWS 4.51. In the advanced configuration, here are a few of the options presented to users:
And this is really only just the beginning. It is highly possible that a screen reader might read the title attribute text instead of the link text. It might read whatever is longer. It might ignore the title attribute text completely.
Using titles can be difficult. While pretty much everyone “knows” it is used for advisory text, the definition of what is “advisory” is vague at best. I’d go so far as to say that just like link text should make sense out of context, so too should title attribute text.
Posted on July 28, 2004 06:21 PM | #
13. Fernando Dunn II said:
While we’re on the subject of links and such, have we all checked out this resume-writing-like information held at W3C entitled Don’t say “click here”. Pretty ancient.
Posted on July 28, 2004 06:50 PM | #
14. Jon Kennedy said:
Put me in the camp of “stick a caption under the image if it needs describing and mirror that in the title”. Alt text is a given.
What this technique does though, is not helpful for screenreaders.
Simply placing the caption within the image itself is viable, but it would be nice if there was a future-proof way of doing it.
Perhaps a display: none; for the plaintext caption on the aural stylesheet?
Seems simple enough, but do screenreaders universally acknowledge the property and ignore the contents like they should?
Apologies for the rambling thought process.
Posted on July 28, 2004 07:31 PM | #
15. missha said:
I’m not agree with Dave in his alt and title examples.
If alt is for “alternative text”, this means that it shuld explain the image, so everybody who can’t see it don’t lose information.
But the title shouldn’t explain the imagen (it’s like the title of a picture, like the Mona Lisa, it’s only the name).
So I think the correct markup would be:
Alt text: “Pears, apples, and bananas in a dish, lit from the top right with a soft focus.”
Title text: “Fruit still life”
(Sorry for my english)
Posted on July 29, 2004 12:06 AM | #
16. Federico said:
When Opera make a list of the links, it will use the title attribute if it’s present, so I use it whenever the link is not self-explanatory enough.
About images: When I think I have to give extra information, I choose a definition list (as seen at Simplebits: dt for the image, dd for the information).
About the mouse and the hover issue: there’s no need for a mouse to get the title information. Just use your own CSS and something like a[title]:after {content:attr(title);}
Posted on July 29, 2004 12:51 AM | #
17. Aleksandar said:
Title on links is good when you`re using image replacement. It is the only way to add some info about the link/image, thus providing small compensation for those highly elusive CSSon/IMGoff group of prople.
Posted on July 29, 2004 12:54 AM | #
18. Kevin Navia said:
Redundancy aside… and it’s been bugging me for a while, do titles and longdesc’s have any advantages with SEO’s or is it just a myth?
Posted on July 29, 2004 12:57 AM | #
19. Anne said:
missha +1. I totally agree with that statement. Especially: “(it’s like the title of a picture, like the Mona Lisa, it’s only the name)”.
Posted on July 29, 2004 01:50 AM | #
20. Richard Rutter said:
I use title attributes a fair bit. Firstly, I’ll often include title=”” in img tags to stop IE showing alt text as a tooltip. Primarily though I use title attributes in external links, the intention being to give readers a better understanding of where the link is going before they click it. The context and wording of the link text should inform readers whether they want to click the link or not I use the title attribute to complete the story, e.g. title=”asterisk*: Title Attribute – Your Take”
At Multimap.com we also use title attributes to provide Tooltip explanations of our toolbar buttons, as you would expect in a desktop application.
Posted on July 29, 2004 01:51 AM | #
21. Small Paul said:
Like PPK, I like to keep things simple. As far as I can tell, the title attribute is intended to provide additional information about an element.
So, if, for example, I have a link that describes itself well enough in its text, I’d leave the title attribute out.
For images, I’d want to describe the image as fully as necessary in the alt attribute. So no title there.
I’m not too concerned personally with the tooltip issue. Whether browsers want to display attributes like these or not is kinda up to them. I’ll first try and understand how a feature was intended to be used in the language when designed. If it turns out that browsers do something horrible with it, I’ll leave it out, but the tooltip displays in IE and Firefox et al don’t bother me.
Posted on July 29, 2004 02:19 AM | #
22. Ian said:
To clarify something Dave said, longdesc takes a URI, not text:
Basically, replacing d-links. The spec suggests using it with image maps, but I guess charts and other info-graphics would benefit, too. I don’t see much help describing the mundane, though–perhaps write a poem.Re title, it does seem a tad redundant and I don’t know if the img tag would include title if it wasn’t just one of the core attributes. I suppose you could use it to caption a photo–writing it out with ::after–if you wanted to be futuristic (does Gecko even support that?). Maybe useful for attribution or for the actual title of a work if that’s important, but not apparent in alt?
Speaking of… I guess alt usage depends on the context, no? For some actionable image (navigation, buttons), say the action or result (“submit, “home,” “about”). For insignificant images, leave it blank (alt=” “). And elsewhere (portraits and such), just give enough information so that a person could decide if he wanted to download the image (“portrait George W. Bush,” “map of the west end”).
Posted on July 29, 2004 03:03 AM | #
23. Ian Stewart said:
I’ve struggled with this question on my own site.
The link (rel=”next”, etc.) elements I include (automatically generated from the site navigation menu structure) have titles extracted from the target page metadata (as do the normal inline links).
The titles on the rel= links seemed like a nice idea, but I found that Lynx makes a complete hash of them (i.e. it just presents a whole mess of concatenated title strings with no separation, and no indication of the “rel=” meaning of each link).
I’m suspecting that other well-intentioned features will have equivalently unsatisfactory outcomes (e.g. I’ve tried to mark up abbreviations and acronyms correctly, using the theory that screen readers should be able to take a hint from them as to how to speak the content. I wouldn’t be too surprised if this also turns out to be a hazard for somebody!)
I could change my site to attempt to mitigate the Lynx problem, but I’ve decided that (to the best of my current knowledge) what I’ve done is conceptually correct, and legitimate usage of HTML. If I change it, I’ll probably disadvantage (hypothetically, anyway) some other users. Perhaps it isn’t/shouldn’t be my problem …
As for the normal links — my auto-generation from metadata approach may cause some of the title attributes to be redundant. However, I’m thinking that browsers of any sort should only render this information when requested, anyway (it seems like the titles are intended to be buried beneath the surface by design, and I’d consider any reader which didn’t allow the user to only see/hear them upon request to be broken).
By the same token, I don’t expect this information to be printed either. If I did, I’d include it inline.
-Ian.
Posted on July 29, 2004 03:52 AM | #
24. Jennifer Grucza said:
For images, I try to write my alt text such that it would make sense in context if spoken aloud or read in a text-only browser along with the surrounding content. This means most of my images have empty alt text. An example of something that would have non-empty alt text is something like a graphic of 5 stars for a rating - then I’d use “5 stars” as the alt text, since it’s meaningful.
I might use the title attribute on an image for a description of the image - something that wouldn’t necessarily make sense in the context of the surrounding content.
For links, the title is a nice way of adding some additional optional information.
Posted on July 29, 2004 09:05 AM | #
25. Rob Mientjes said:
I tend to title every link and image, and alt every image too. But that kinda sucks, since IE borks my logics. Why o why is there IE when there also is FF? I find it ideal to specify an alt tag for screenreaders and the title to the a-tag around the image to say what it does, not what it shows. Siily Microsoft dudes…
Posted on July 29, 2004 10:11 AM | #
26. Matt May said:
On my blog, I use title for links that aren’t adequately described by the link text (e.g., <a href=”http://www.jibjab.com” title=”jibjab.com: This Land”>this link everybody is talking about</a>).
I have always avoided “click here”-like links for several reasons, not least of which being the rank annoyance it causes to screen reader users. So that’s not the issue I want to solve. But in the course of my writing, sometimes what I’m saying doesn’t fully cover the target of my link, or is ambiguous, so I use title to make up for that.
There’s an added benefit for doing it uniformly, as well: I can extract every link I’ve pointed to in a way that makes sense out of context simply by parsing links and using the title (which contains source before the colon, article title after), or, if it’s missing, the domain in the URI and the text of the link. But maybe that’s only interesting to me.
Posted on July 29, 2004 02:58 PM | #
27. Simon Jessey said:
I use title attributes everywhere. Every link and image of my site has one, together with every abbreviation and acronym. My images also have alt attributes, because they serve a different purpose to the title attribute.
Posted on July 30, 2004 06:22 AM | #
28. Dave Unitan said:
I agree with Matt. Creating a redundant label for screen readers seems to be an annoyance and a duplication of effort. If the link text is insufficient in its description to the user, I will take the time to add the title attribute.
Posted on July 30, 2004 09:23 AM | #
29. Scott Johnson said:
I typically use title attributes to list the title of the page I’m linking to when the link text is different. If they’re the same, I won’t use a title attribute, as I feel it is redundant. I have been following this practice fairly reliably for over a year now, and I have been very pleased with the results.
Here’s an example of the way I use title attributes:
Posted on August 5, 2004 08:35 PM | #
30. Flores said:
How could I control the timmimg of the tooltip window? I need to extend the default time
M. Flores
ALberto
Posted on January 22, 2005 04:29 PM | #
31. Libertus said:
I started a comment here about the title attribute, because this discussion really pricked my interest, but it became something much bigger and ended up a posting on my blog.
I use titles A LOT, for loads of different purposes, and I had not fully appreciated the consequences to universal access or the variability of implementation.
Hence the name,
“That Darned title Attribute”. Enjoy.
Posted on February 6, 2006 06:11 AM | #
Comments are now closed