Attribute title should not be empty
Description
This rule verifies if there are elements that have an attribute title
with an empty value. This also includes whitespace.
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 from 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 skipped 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 also includes whitespace.
Alternative accessible attributes
To provide accessible information for screen reader users, developers can use the following attributes:
- aria-label: The
aria-label
attribute 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-describedby
attribute can be used to associate an element with another element that provides additional descriptive information. This can be useful when an element requires a 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