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 using aria-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