SiteLint documentation and guidelines

An aria-labelledby attribute must reference an element that contains meaningful content

Description

This rule ensures that elements using the aria-labelledby attribute reference the elements with non-empty content. The aria-labelledby attribute is essential for users who rely on assistive technologies, such as screen readers, to understand the context and purpose of interactive elements on a webpage. Proper implementation ensures that users receive all necessary information to interact effectively with the content.

Disabilities impacted

  • Visual impairments: users with visual impairments rely on screen readers to interpret web content. aria-labelledby provides additional context that may not be immediately visible, enhancing understanding.
  • Cognitive disabilities: users with cognitive disabilities benefit from extra descriptive information to understand complex interactions and elements on a page.
  • Learning disabilities: additional descriptions can aid comprehension and reduce cognitive load for users with learning disabilities.

Why it matters

Using aria-labelledby correctly ensures that all users, regardless of their abilities, can access and understand web content. It provides critical contextual information that can make interactions more intuitive and informative. This attribute is especially important for complex forms, interactive widgets, and any elements where additional context is necessary for proper use.

Coding problems and solutions

Common coding problems

  • Missing references: the aria-labelledby attribute references an ID that does not exist in the document.
  • Incorrect references: the aria-labelledby attribute references an element that is not relevant or useful.
  • Redundant information: the referenced description duplicates information that is already conveyed by other means, leading to unnecessary verbosity for screen reader users.
  • No content on associated element: the referenced description has no content.

How to fix it

Ensure valid references

Verify that each ID referenced by aria-labelledby exists and points to an element that provides useful, non-redundant information.
Correct example
<input type="text" id="username" aria-labelledby="usernameHelp">
<div id="usernameHelp">Your username should be 8-20 characters long.</div>

Provide relevant descriptions

Ensure that the referenced descriptions are not empty, relevant and enhance the user’s understanding of the element’s purpose.

Avoid redundancy

Do not duplicate information that is already conveyed through other attributes or directly visible content. Ensure that aria-labelledby adds value without overwhelming the user with repetitive information.

Known limitations

  • Dynamic content: if the content of the described element changes dynamically, ensure that the changes are correctly conveyed to assistive technologies.
  • Nested elements: be cautious with nested elements; ensure the described element is properly accessible and not hidden or obscured.
  • Browser and screen reader support: there might be variations in how different browsers and screen readers interpret aria-labelledby. Testing across multiple platforms is crucial.

Resources

Rule

  • ID: aria-labelledby-association-empty-element