Associated elements through aria-labelledby exists but they are empty
Description
This rule ensures that elements using the aria-describedby attribute properly reference one or more elements that provide additional descriptive information. The purpose of this attribute is to establish a relationship between the control and the element(s) that describe it, enhancing accessibility for users with disabilities.
The aria-describedby 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-describedbyprovides 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-describedby 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-describedbyattribute references an ID that does not exist in the document. - Incorrect references: the
aria-describedbyattribute 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.
How to fix it
Ensure valid references
Verify that each ID referenced by aria-describedby exists and points to an element that provides useful, non-redundant information.
<input type="text" id="username" aria-describedby="usernameHelp">
<div id="usernameHelp">Your username should be 8-20 characters long.</div>Provide relevant descriptions
Ensure that the referenced descriptions are 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-describedby 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-describedby. Testing across multiple platforms is crucial.
Resources
Rule
- ID:
aria-labelledby-association-empty-element