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:

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



98.5% done

How close this website is to fixing this issue.

More results from Watford Borough Council