Crownpeak (Retired)

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
Labels (1)

Can't find what you are looking for?

Find Answers

Search our DQM Forum to find answers to questions asked by other DQM users.

Ask a Question

No luck? Ask a question. Our Product and Support teams are monitoring the Forum and typically respond within 48 hours.

Ask a Question