Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

The title attribute (and its corresponding yellow hovering label displayed by browsers for a few seconds); is it still considered good practice to use it on hyperlinks and buttons in a web app?

For example: "Click here to post your article" on a "Post" button, or "Deleting this article cannot be undone" on a "Delete" button.

My impression is that usability-aware sites these days write everything they need to communicate to the user directly into the HTML (or JS-driven popups), and that the title attribute is a remnant of the 90's that has never been updated to modern standards.

I'd like to hear arguments for and against, though I'm leaning towards dropping them myself.

share|improve this question
add comment

3 Answers

The title attribute was intended for some rather specific purposes. However, due to a variety of reasons, these were never universally supported across browsers and assistive devices. Some more info regarding the accessibility pros/cons of title attributes.

In terms of an interactive component for your pages, the world of touch-interaction has made them rather moot. Anyone using a tablet or phone (or increasingly, touch-enabled laptops), will have no use for the title attribute.

In addition, as you state, I do believe we are getting better at making our links more contextually accessible than before (ie, instead of 'click here' most people understand that it should be a bit more descriptive...)

In summary, I think title attributes are still useful, and should be reviewed from an accessibility standpoint, but should not be a primary focus nor should they be required for the user to interact with the site. Taking that a step further, I'd argue all hover interactions should be phased out of the design process as they simply aren't usable if you're on a touch device (or in many cases, even if you just aren't using a mouse).

share|improve this answer
add comment

You raise up a good question. My take on this is that it is a very practical attribute for links, mainly, and buttons, less. Titles on images are very nice to use as a caption placeholder. All in all it is a very good semantic way to add metadata to images and links that can be then presented visually in any way you please through javascript if you think it is needed; in the case of touch screens, for instance, this makes even more sense, since you can, through scripting, display that data in many ways to compensate for the lack of hovering events. You yourself mention modern ways of presenting that info through JS-driven popups, that's the visual layer, the data those popups present could be inside the title attribute.

It is useful to give users a clue as to where they will be led to before they click through the title attribute; adding that same information in the middle of a paragraph could be a bit annoying if you have various links in an article.

The text inside the a tag sohould always be a clear indicator of the info behind that link, but it shouldn't be required to tell you if the destination is in Russian (pity hreflang never caught on), an external site, a Google search, a link to all items on the current site tagged with international, a newspaper article... that is metadata that gives you a hint as to where you are being taken, but that does not need to visually pollute a paragraph.

Whether the average user is aware of tooltips, and can therefore enjoy the extra info on a link is a different question (bare in mind that average here shoudn't be taken statiscally since user savvyness is probably a Gauss dstribution, so the majority of your users is moderately savvy).

Semantically it makes sense, since you can then present it through js/css in any way you see fit. If you are going to add the same info in a, let's say p, below the link, then the title attribute makes more sense since it is explicitly related to the link, unlike a p.

Once again, if people don't realize there is a tooltip, it may be worthless, but that is the visual layer, Where you hold the data is one thing, how you present it (relying on the default browser behaviour is a different thing).

EDIT: This is list of good examples of tooltips

share|improve this answer
    
While it's certainly debatable, many would not suggest using TITLE attribute for image captions, as if the image needs a caption, it shouldn't be hidden behind a title (rather, it should be displayed on the page itself). –  DA01 Aug 3 '13 at 14:17
    
@DA01 You are right, specially since we have better markup in HTML5 now; I probably should have recommended metadata for the image. But before figcaption and the like, I really did use them that way :o/ and then more recently outputted the title as a caption. Now, yes, there are better ways. –  user2513484 Aug 3 '13 at 14:46
add comment

The title attribute has two main issues:

  1. It only takes plain text
  2. It has a delay before it appears

An ideal solution would be to use the title (or another like data-title) attribute in HTML, but use JS to read it and display in a manner to overcome above two.

I do agree that it's a good practice to add additional information in title, however you cannot rely on user needing to read it to be able to use the software. So it is really useful for cases where user is looking for additional help.

Other point is that if you do it in place, do it in all..as there is no visual indication, user should see it whenever they expect it.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.