Linter Rule: Avoid using the `title` attribute

Rule: html-no-title-attribute

Description

Discourage the use of the title attribute on most HTML elements, as it provides poor accessibility and user experience. The title attribute is only accessible via mouse hover and is not reliably exposed to screen readers or keyboard users.

Rationale

The title attribute has several accessibility problems:

It's only visible on mouse hover, making it inaccessible to keyboard and touch users
Screen readers don't consistently announce title attributes
Mobile devices don't show title tooltips
The visual presentation is inconsistent across browsers and operating systems

Instead of relying on title, use visible text, aria-label, aria-describedby, or other accessible alternatives.

Exceptions

This rule allows title on <iframe> and <link> elements where it serves specific accessibility purposes.

Examples

✅ Good

erb

<!-- Use visible text instead of title -->
<button>Save document</button>
<span class="help-text">Click to save your changes</span>

<!-- Use aria-label for accessible names -->
<button aria-label="Close dialog">×</button>

<!-- Use aria-describedby for additional context -->
<input type="password" aria-describedby="pwd-help">
<div id="pwd-help">Password must be at least 8 characters</div>

<!-- Exceptions: title allowed on iframe and links -->
<iframe src="https://example.com" title="Example website content"></iframe>
<link href="default.css" rel="stylesheet" title="Default Style">

🚫 Bad

erb

<!-- Don't use title for essential information -->
<button title="Save your changes">Save</button>The `title` attribute should never be used as it is inaccessible for several groups of users. Use `aria-label` or `aria-describedby` instead. Exceptions are provided for `<iframe>` and `<link>` elements. (html-no-title-attribute)

<div title="This is important information">Content</div>The `title` attribute should never be used as it is inaccessible for several groups of users. Use `aria-label` or `aria-describedby` instead. Exceptions are provided for `<iframe>` and `<link>` elements. (html-no-title-attribute)

<span title="Required field">*</span>The `title` attribute should never be used as it is inaccessible for several groups of users. Use `aria-label` or `aria-describedby` instead. Exceptions are provided for `<iframe>` and `<link>` elements. (html-no-title-attribute)

<!-- Don't use title on form elements -->
<input type="text" title="Enter your name">The `title` attribute should never be used as it is inaccessible for several groups of users. Use `aria-label` or `aria-describedby` instead. Exceptions are provided for `<iframe>` and `<link>` elements. (html-no-title-attribute)

<select title="Choose your country">The `title` attribute should never be used as it is inaccessible for several groups of users. Use `aria-label` or `aria-describedby` instead. Exceptions are provided for `<iframe>` and `<link>` elements. (html-no-title-attribute)
  <option>US</option>
  <option>CA</option>
</select>

Linter Rule: Avoid using the title attribute ​

Description ​

Rationale ​

Examples ​

✅ Good ​

🚫 Bad ​

References ​