We’re launching Lyria 3.5 in Google Flow Music, with advances across musicality, lyrics, vocals, and creative control
deepmind.google·6d ago
AI Engineering
Lobsters·22d ago·5 min read
Don’t Use aria-label on Static Text Elements (2024)
TL;DR
Using aria-label or aria-labelledby on static text elements like <div> or <span> is a common accessibility mistake. These attributes should only be applied to interactive elements or when roles are changed.
✦ Why It Matters
Review your code to ensure aria-label and aria-labelledby are only used on interactive elements or appropriately role-changed elements.
Key Takeaways
- Avoid using aria-label on static text elements like <div> and <span>.
- Only apply aria-label to interactive elements or when roles are changed.
- Ensure screen readers can effectively interpret accessibility attributes.
- Review existing code for compliance with ARIA best practices.
Full Summary
Accessibility in web development often suffers from the misuse of aria-label and aria-labelledby attributes on static text elements such as <div>, <span>, <p>, <strong>, and <em>. These attributes are designed for interactive elements like buttons and links, and their application on non-interactive elements is generally invalid unless the element's role is explicitly changed.
Most screen readers will not announce these invalid labels, rendering them ineffective. The article emphasizes that developers should avoid using these attributes on static text to prevent confusion and ensure proper accessibility.
Instead, focus on applying aria-labels only to elements that require them, such as form controls or navigational landmarks. This approach not only enhances user experience for those relying on assistive technologies but also aligns with best practices in web accessibility.