Links with the same accessible name go to different places

What’s wrong

Two links share the exact same accessible name, such as “Read more,” but point to different pages.

Why it matters

Screen reader users often scan a page by pulling up a list of links. Two identical entries that lead to different content look like the same link, and there’s no way to tell them apart from that list.

How to fix it

Make each link’s accessible name specific to its destination.

<h3>Accessible forms</h3>
<a href="/blog/forms">Read more</a>
<h3>Color contrast basics</h3>
<a href="/blog/contrast">Read more</a>

<h3>Accessible forms</h3>
<a href="/blog/forms">Read more: Accessible forms</a>
<h3>Color contrast basics</h3>
<a href="/blog/contrast">Read more: Color contrast basics</a>

If changing visible text isn’t an option, add aria-label instead to keep the design unchanged while fixing the name.

Learn more

• WCAG Understanding 2.4.9
• MDN: Accessible name