What the issue is
The use of the "aria-labelledby" attribute is a powerful way to provide accessible names for buttons, especially when text alone does not convey enough context, or when aiming to combine text from multiple sources.
However, buttons with "aria-labelledby" attributes that reference non-existent ids, multiple ids that bring in unrelated or incorrect information, or ids that change dynamically without updating the "aria-labelledby" attribute, can significantly confuse users. Such misassociations can make it difficult for screen reader users to understand button purposes, leading to navigation and interaction problems.
Why this is important
Correctly associating button labels with their respective elements using "aria-labelledby" ensures that users of assistive technologies receive accurate and comprehensive information. Proper use of this attribute is crucial for conveying the full context of the button's function, particularly in complex web applications where buttons may perform dynamic or context-sensitive actions. Inaccurate or confusing label associations can mislead users, undermining the usability and accessibility of web content.
Who it affects
This issue affects:
- Users of screen readers who depend on explicit and correct relationships between buttons and their labels to navigate and interact with web content.
- Users with cognitive disabilities who benefit from clear and descriptive labels that accurately reflect the action of the button.
- All users, as consistent and contextually accurate button labels contribute to a more understandable and navigable web interface.
How to remediate the issue
- Ensure that all elements referenced by "aria-labelledby" on a button exist and are visible to the user when the button is present.
- Review and test the combinations of elements referenced by "aria-labelledby" to ensure they accurately and effectively describe the button's function.
- Avoid dynamically changing ids referenced by "aria-labelledby" without also updating the "aria-labelledby" attribute to reflect these changes. This might involve scripting solutions that update ARIA attributes in real-time as content changes.
- Regularly test your web content with a variety of screen readers and assistive technologies to ensure that the "aria-labelledby" associations provide clear, accurate, and useful information to users.
Guidance on using "aria-labelledby" to provide accessible names can be found at WCAG Quick Reference on Label in Name.