Overwriting an element's accessible name can break speech recognition
- Published at
- Updated at
- Reading time
You might have been in situations where you received a classical three-column blog layout design. Unfortunately, all three columns close off with a "Read more" link. These links aren't good for accessibility because "Read more" isn't very descriptive.
Especially when a page includes multiple links with the same name, navigating them is a challenge. How should one know where all these "Read more" links lead to?
aria-label then helps to provide a more accessible name. Right?
<a href="/wonders" aria-label="Wonders of the world">Read more</a>
aria-label, screen readers provide more valuable information, even when elements look visually the same.
But today I learned that
aria-label can also lead to issues with speech recognition tools when it doesn't match what's visible.
Visitors navigating the web with their voice can tell the software to click an element based on what they see — "Click Read more". An
aria-label that overwrites an element's accessible name breaks this functionality.
Ashlee M. Boyer recommends in her article Don’t Overwrite Visual Labels With
aria-label to include the visual label if you're improving it via
<a href="/something" aria-label="Read more: Wonders of the world">Read more</a>
That's good to know, but the general rule of ARIA remains: Use native and semantically correct elements whenever possible and only use ARIA when you really have to.
So it might be better to get rid of all these "Read more" links in the first place.
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 3 days ago.