Title Attribute

Issues

A title attribute is used for an element instead of visible <label> text to communicate information, but the purposes of these elements are mutually-exclusive.
- Multiple buttons have the same aria-label attributes, creating confusion for assistive technology users.
- An image uses a <title> to describe the image instead of through alt text.
Screen readers will sometimes read the title attribute text if no other method is present. Some screen readers (VoiceOver) treat the title attribute as an additional description for the image and will read both the accessible name AND the title. Others (NVDA, JAWS) will not read the title if an accessible name is available through other methods. All screen readers read the title text if no other alternative text is provided.

“If you want to hide content from mobile and tablet users as well as assistive tech users and keyboard only users, use the title attribute.”

Add context to elements, indicating its function with unique, descriptive, and concise labels.

Use a visible <label> element to name a form control or page element.
ONLY use the title attribute as a tooltip to provide ADDITIONAL descriptive information (such as functionality or behavior), but not as a replacement for a <label> or an aria-label when native semantics are not supported.
For functional images used as buttons, a label or name should be implemented, and a title would be used only to describe it’s functionality, rather than duplicating the name or label.

A properly implemented title will benefit: