Checkpoints - Combine adjacent links together if they have the same destination
Why is this important?
Adjacent links lead to duplication for screen reader users. They often happen when there’s content that has multiple elements linking to the same page. For example, a news teaser might have a link around the heading and around the teaser image. Users with assistive technologies could encounter two identical links instead of one.
How can I resolve this issue?
Put the text and image together into one <a> element and provide an empty <alt> attribute on the image to eliminate duplication of text. In this way, both elements can be clicked, but keyboard users only encounter one link and assistive technology that provides users with link lists for a web page do not include duplicate links.
For cases where the links are both text, consider combining these together or removing one of the links
What topics do this checkpoint affect?
Accessibility (WCAG 2.0 Level A, 2.4.4)
Can you explain how this checkpoint works?
This checkpoint examines the page and reports if a <a href> element is immediately followed with an identical <a href> element with the same link text and destination and nothing in-between them, except spacing.
For example: <a href="news.html"></a> <a class href="news.html"></a>
The above would be flagged due to they are :
Both <a href> elements
Nothing except spacing between the 2 link elements
The destination of the link elements (news.html) is the same
Despite "class" attribute is present in the second link element, they are both fundamental link elements with the same content