Tooltip content must not be empty

Description

The “Tooltip content must not be empty” accessibility report is an error message that indicates the title attribute is present, but it does not contain any text. The title attribute provides a brief description of an element’s purpose or functionality, and is often used by assistive technologies such as screen readers to provide additional context to users.

Disabilities impacted

• Visual impairments: users with visual impairments may rely on screen readers to read out the content of title attributes, which can provide important information about an element’s purpose or functionality. If the title attribute is empty, the user may not receive this information.
• Cognitive disabilities: users with cognitive disabilities, such as learning disabilities or attention deficit hyperactivity disorder (ADHD), may benefit from the additional context provided by title attributes. Empty title attributes can make it more difficult for these users to understand the content and functionality of a web page.
• Motor impairments: users with motor impairments, such as those who use a mouse or keyboard with difficulty, may rely on title attributes to provide additional information about an element’s purpose or functionality. If the title attribute is empty, the user may need to rely on other methods to access this information, which can be more difficult.

Why it matters

Empty title attributes can make it more difficult for users with disabilities to understand and navigate web content. This can lead to frustration, confusion, and a negative user experience. By ensuring that title attributes are not empty, developers can provide a more accessible and user-friendly experience for all users.

Coding problems and solutions

Common coding problems

Some common coding problems that can lead to empty title attributes include:

• Forgetting to add text to a title attribute.
• Using a title attribute with a null or undefined value.

How to fix it

To fix the Title attribute must not be empty error, developers can follow these steps:

• Check the HTML code for the title attribute and ensure that it contains a string value with meaningful text.
• If the title attribute is being set dynamically, ensure that the value is being set correctly and that it is not null or undefined. Any non-string value will be converted to a string, so null becomes 'null'.
• Test the web page with a screen reader or other assistive technology to ensure that the title attribute is being read out correctly.

Resources

• title – HTML: HyperText Markup Language
• H33: Supplementing link text with the title attribute
• Link Purpose (In Context) (Level A)

Standard

• Standard: SiteLint, Best Practices
• Rule ID: empty-title-attribute