Using the HTML Title Attribute

Posted on Updated on HTMLAccessibility by Adam Laki

With the help of the title attribute, we can specify plus information to elements if needed.

For a mouse user, this extra data will be visible when he/she navigates over the element. It is kind of like a native tooltip (in most browser but don’t have an overall behavior), can have a single string value, and can operate on any HTML element (but the idea was to use it on anchors). It isn’t supported uniformly in the screen-readers.

It is a small and insignificant part of the specification but still worth to mention it mostly because it’s misused and overused.

About My Experience

When I first started coding at a smaller agency, I saw it a lot in other’s code in a redundant way where they declared it as an addition to the generic links.

<a href="https://pineco.de" title="This is the link of Pine">This is the link of Pine</a>

If you look at this, you will have a hard time explaining it. I don’t know what the goal was, but I can assume some SEO trickery (but feel free to correct me). For a mouse or keyboard user, it isn’t annoying much (and there aren’t any extra information), but some screen readers will read out the same thing two times. You can imagine what it feels like to navigate on a site where the main links are the same.

The Usability and Accessibility Problems

The title attribute’s value inaccessible for keyboard and touch screen users because it won’t show its value on focus state (only on mouse hover). It means we can’t use this if we want to show a text to all of our users.

Use Descriptive Links and Don’t Duplicate the Text

A wrong example is the anchor element. If you want an excellent link, use descriptive text and only that and don’t duplicate the text.

<!-- Don't do it -->
<a href="https://pineco.de" title="This is the link of Pine">This is the link of Pine</a>
<a href="https://pineco.de" title="Navigate to Pine blog">our blog</a>

<!-- Do it -->
<a href="https://pineco.de">Navigate to Pine blog</a>

Don’t Add Plus Information

Besides the redundant information, don’t try to add any new one:

<a href="ebook.pdf" title="mobi format, 2mb size" download>Download e-Book</a>

If you want to show additional information, do it like you always use the proper elements (like <p>) and write it out visibly.

It can’t be a caption

In case of an image, we always – unless it is a decorative element – have to use an alt parameter. If we want to add a caption, don’t use the title attribute. Use the <figure> and <figcaption> element and be sure that this information is always visible.

<figure>
    <img src="sunset.jpg" alt="Sunset">
    <figcaption>Sunset over the Matterhorn, Switzerland.</figcaption>
</figure>

Where to Use the Title Attribute

One of the goals when building your HTML based project is to serve the same content to all of your users. And this is a high starting point. If you start to think about it, you can avoid a lot of pitfalls.

Iframe, Frame Elements

If you want to label your <iframe> and <frame> elements, it is still safe to use the title.

<frame title="Map">

Labeling in Redundant Cases in Forms

If you have a search form with an input field and a search button adding an extra “Search” label can be redundant. Your submit button will show a clear purpose. In this case, we can add a name with the title attribute instead of a separate <label> element. Today using aria-label or aria-labelledby would be a better solution.

<form>
    <input type="text" title="Search">
    <input type="submit" value="Search">
</form>
<form>
    <input type="text" aria-label="Search">
    <input type="submit" value="Search">
</form>

Summary of The Title Attribute

So should we use it? Today there are just a few use cases, and where is one we can choose a better solution (aria-*). Be careful about it, and if you use it out of habit, try to leave it.

Need a web developer? Maybe we can help, get in touch!