Anchor tag within anchor a11y question

So let's say we have a card that is a URL in itself, that is, it's an anchor tag, and within an anchor tag, there is a paragraph that also has an anchor tag. So what's the accessibility concern in having an anchor tag within an anchor tag, and how can we fix it? Also, if you can point to some good articles, that would be nice.

The accessibility concern is that an interactive element is nested inside another interactive element. In your example, that means a link inside a link, which is invalid HTML and creates a poor experience for keyboard and screen-reader users. MDN’s <a> reference says an anchor’s permitted content is “transparent,” except that no descendant may be interactive content or another <a> element. (MDN Web Docs)

Why this is a problem:

• Invalid markup: an <a> cannot contain another <a>. MDN explicitly calls that out in the element’s content rules. (MDN Web Docs)

• Broken focus behavior: Deque notes that nested interactive controls can produce an empty tab stop or controls that are not properly announced by screen readers. (Deque University)

• Confusing activation behavior: users may not know which destination will activate, and keyboard navigation becomes ambiguous. WebAIM stresses that links need to be clearly accessible and operable by keyboard. (WebAIM)

What to do instead

Best fix: make only one thing the link

If the whole card should go to one URL, make the card itself the only anchor, and make the inner text plain text, not another link.

<a class="card" href="/article/123">
  <h2>Article title</h2>
  <p>Read the full article about accessibility patterns.</p>
</a>

That is the cleanest option when there is only one destination.

If the card and inner text need different destinations

Then the whole card should not be an anchor. Use a non-interactive container, and put separate links inside it.

<article class="card">
  <h2><a href="/article/123">Article title</a></h2>
  <p>
    By <a href="/authors/jane-doe">Jane Doe</a>
  </p>
</article>

This gives each link its own clear focus target and accessible name.

If you want the whole card clickable visually

Use one real link for the primary action, then stretch it with CSS rather than nesting links. For example, many teams use a pattern where:

• the card is a container

• the title link is the real primary link

• CSS makes that link’s hit area fill most or all of the card

• any secondary links remain separate

Example structure:

<article class="card">
  <h2><a class="card-link" href="/article/123">Article title</a></h2>
  <p>Short summary of the article.</p>
  <p><a href="/topic/accessibility">Accessibility</a></p>
</article>

This preserves valid HTML and separate keyboard stops.

Rule of thumb

A card should usually be one of these:

• One action, one destination → one <a> around the card contents

• Multiple actions or destinations → non-link container with separate links/buttons inside

Good articles and references

• MDN: <a> element — best quick reference for the rule that anchors cannot contain interactive descendants. (MDN Web Docs)

• Deque University: Nested interactive controls — good explanation of why nested controls confuse assistive tech and create empty tab stops. (Deque University)

• WebAIM: Links and Hypertext — strong general reference on accessible link behavior and keyboard access. (WebAIM)

A very practical way to think about it: don’t make users choose between two clickable things in the same focus target.

If you want, I can also sketch the recommended HTML/CSS pattern for a “fully clickable card with secondary links” in React or plain HTML.