Artboard 16light, inspiration, solution, idea, innovation,Google Sheets iconSwift icon
Published at
Updated at
Reading time
2min
This post is part of my Today I learned series in which I share all my web development learnings.

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?

VoiceOver showing three undescripting "Learn more" links

Easy-peasy, aria-label then helps to provide a more accessible name. Right?

<a href="/wonders" aria-label="Wonders of the world">Read more</a>

Thanks to aria-label, screen readers provide more valuable information, even when elements look visually the same.

VoiceOver menu showing three links with different accessible names.

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 aria-label.

<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.

Related Topics

Related Articles