robohash image acting as kam's profile photo

Tip 020 - Title Attribute


The title attribute is a weird one. It's seemingly everywhere, yet the spec says it doesn't provide much. It's a global attribute, so let's look as a few ways it would be used.

Title essentially gives an element a name or a label. The problem is that this is done all programmatically, so it's hard to tell if a title is supported on that certain element on that certain assistive technology (AT).

You can add a title to a link. Accessibility-wise, the actual text of the link should be descriptive enough to tell you where you're going, but if it's not, a title is an option.

You can add a title to an <input>. But we already have <label> for that, so again, it's a backup in case your actual label isn't enough.

You can add a title to an image. But again, we have the alt attribute already, which is more guaranteed to be supported and is more commonly recognized.

You can add a title to an iframe. This is a pretty okay idea, because there isn't another native label for an iframe without dipping into ARIA stuff. It also nicely mirrors the <title> tag that the iframe is naturally missing from the tab bar.

You can add a title to ANY other element. By default this gives text a dotted-underline look that suggests an acronym, (<attr> uses a title, hint hint) and the title will be displayed when you mouse over an element.

Overall titles are pretty meh. When you begin considering accessibility they start to lean from meh to downright not-gonna-work territory. From what I can tell, they're essentially a band-aid solution, and if you somehow really need tooltips or whatever, it's better to find a more accessible solution to making those.


Have you written a reply on another site? Put the URL here: