What does this mean?
Screen reader users will see links on a page listed without context, so you should ensure the same link text is not used to point to different web addresses.
For example:
More help<p>
Learn the latest about our products:
<a href="/products/news">News</a>
</p>
<p>
Learn the latest about our services:
<a href="/company/news">News</a>
</p>
To a screen reader who is listing links, they will only hear:
- News
- News
These links appear to be the same, but they both behave differently.
One solution, which doesn't require the page design to change, is to add an
aria-label
for each link:
<p>
Learn the latest about our products:
<a href="/products/news" aria-label="Product news">News</a>
</p>
<p>
Learn the latest about our services:
<a href="/company/news" aria-label="Company news">News</a>
</p>
Which will be heard as:
- Product news
- Company news
To pass this checkpoint, make sure that links which point to different pages
have distinct text inside them, or that they specify ARIA labels (aria-labelledby
or
aria-label
), or they use hidden text only visible to screen readers
(e.g. <span class="sr-only">...</span>
) to distinguish them from each
other.
If links point to the same page (e.g., they redirect or use tracking parameters, but are functionally equivalent to the user) you can ignore this issue.
96.2% done
How close this website is to fixing this issue.
Text | Found on page | Issues |
---|---|---|
domestic abuse | 2 |