Short answer: Don’t use them, except in special circumstances.
title attributes are often perceived as an accessibility (and SEO) bonus, but the opposite is true. For screen reader users the content included inside of the
title attribute is typically unnecessary, redundant, and possibly not even used. Conversely, content being put in the
title attribute is being hidden from the (probable) majority of your users. If information is being hidden from the majority of your users, then it’s likely not necessary.
There are a few times when using a
title attribute is appropriate:
- For providing a label when a text label would be redundant
If you must use
title on images, keep it the same as the
Based on the intended behavior for Text Alternative Computation the precedence for calculating a text alternative should be:
In cases where two or more of the above are used, whatever is highest in that list becomes what gets used. Consider the following example:
<img src="/path/to/image.png" alt="" title="some stuff that could be useful" />
In this case, the
alt actually becomes the alternative, because it is higher in precedence. So even though the
title has useful content, it doesn’t get used because the
alt is there. For a universally reliable text alternative for images, the
alt attribute should be the the preferred method. In cases where a
title attribute is provided, it should have the same value as the
Rule of Thumb: Serve all users equal content.
- The Trials and Tribulations of the Title Attribute by Scott O’Hara (December 22, 2017)
- “Using the HTML title attribute” by Steve Faulkner (January 15th, 2013)
titleattribute on MDN Web Docs