Description
This rule verifies if there are elements that have an attribute title with an empty value. This includes also whitespaces.
The importance of non-empty title attributes for predictable processing and improved performance
title attribute should not be empty. This will ensure that the value of title will be processed in a predictable way. As a side effect removing an empty value of title attribute will make the code smaller, which means less data to transfer and faster processing by e.g. the browser.
The title attribute and screen readers
The title attribute in HTML is used to provide additional information about an element. It is commonly used to display tooltips when a user hovers over an element with their mouse. However, the title attribute is not always available or useful for screen readers, which are assistive technologies used by individuals with visual impairments.
The title attribute is not consistently read by all screen readers, and its support can vary depending on the browser and assistive technology being used. Some screen readers may ignore the title attribute altogether, while others may read it in addition to other accessible attributes like aria-label.
It is important to note that the title attribute should not be relied upon as the sole means of conveying important information to screen reader users. Instead, developers should use other accessible attributes like aria-label or provide descriptive text within the content of the element itself. These alternative methods ensure that the information is accessible to all users, regardless of their assistive technology.
Elements that are skipped while testing
Following elements are being skip while evaluating this rule:
<img><html><head><title><body><link><meta><style><script><noscript><iframe><br><hr>
How to fix it
The rule passes when an element has an attribute title with a non-empty value. This includes also whitespaces.
Alternative accessible attributes
To provide accessible information for screen reader users, developers can use the following attributes:
- aria-label: The
aria-labelattribute defines a string value that labels an interactive element. It is specifically designed to provide a text alternative for elements that do not have visible labels . By usingaria-label, developers can ensure that screen reader users receive the necessary information. - aria-describedby: The
aria-describedbyattribute can be used to associate an element with another element that provides additional descriptive information. This can be useful when an element requires more detailed explanation or context.
By using these accessible attributes, developers can enhance the accessibility of their web content and ensure that it is properly conveyed to screen reader users.
Standard
Accessibility, Best Practices, SiteLint