SiteLint documentation and guidelines

Associated elements defined in aria-labelledby does not exists or having an empty content only

Description

The aria-labelledby attribute in HTML is used to provide an accessible name for an element by referencing another element that contains the text. This attribute is crucial for accessibility, as it helps screen readers and other assistive technologies convey the purpose or meaning of the element. However, if the referenced element is empty or does not contain meaningful text, the aria-labelledby attribute fails to provide the necessary information, leading to accessibility issues.

Disabilities impacted

  • Visual impairments: users with visual impairments who rely on screen readers may not receive any meaningful information if the aria-labelledby attribute references an empty element.
  • Cognitive disabilities: users with cognitive disabilities benefit from clear and descriptive labels that help them understand the purpose of an element.
  • Motor impairments: users with motor impairments who navigate using keyboards or other assistive devices rely on properly labeled elements to interact efficiently.

Why it matters

Proper use of the aria-labelledby attribute ensures that all users, particularly those using assistive technologies, can access and understand the content. If the referenced element is empty or lacks meaningful text, it creates confusion and hinders the user’s ability to interact with the element effectively. Ensuring that the aria-labelledby attribute references a meaningful and descriptive element enhances the accessibility and usability of the web content.

Coding problems and solutions

Common coding problems

  • Empty referenced element: the element referenced by the aria-labelledby attribute is empty, providing no useful information.
  • Non-descriptive referenced element: the referenced element contains text that is not descriptive or meaningful.
  • Incorrect id reference: the aria-labelledby attribute references an incorrect or non-existent id.

How to fix it

Ensure referenced element contains meaningful text

Make sure that the element referenced by the aria-labelledby attribute contains descriptive and meaningful text.

Incorrect example
<label id="username-label"></label>
<input type="text" id="username" aria-labelledby="username-label">
Correct example
<label id="username-label">Username:</label>
<input type="text" id="username" aria-labelledby="username-label">

Use descriptive text in referenced elements

Provide clear and descriptive text in the element that is referenced by the aria-labelledby attribute.

Incorrect example
<p id="description">Text box:</p>
<input type="text" aria-labelledby="description">
Correct example
<p id="description">Enter your username in the text box below:</p>
<input type="text" aria-labelledby="description">

Verify correct id references

Ensure that the aria-labelledby attribute references the correct id of an existing and appropriate element.

Incorrect example
<h2 id="header">User Information</h2>
<form aria-labelledby="nonexistent-id">
    <!-- Form contents -->
</form>
Correct example
<h2 id="header">User Information</h2>
<form aria-labelledby="header">
    <!-- Form contents -->
</form>

Known limitations

  • Dynamic content: ensure that dynamically generated content correctly implements the aria-labelledby attribute and references appropriate elements.
  • Complex documents: for complex documents with many elements, carefully plan and test the use of aria-labelledby to ensure clarity and accessibility.
  • Testing across devices: test the implementation across different devices and screen readers to ensure the aria-labelledby attribute provides the necessary information.

Resources

Rule

  • ID: aria-labelledby-association