← All rules

Keyboard

Do not nest interactive controls

• Rule: nested-interactive
• Severity: Serious
• WCAG level A

Why it matters

A link inside a button, or a button inside a link, gives the browser two targets in one place. Screen readers announce only one of them, and which one is unpredictable.

How to fix it

1. Put the controls next to each other instead of inside one another.
2. Where a whole card should be clickable, use one link and stretch it with CSS over the card.
3. Check custom controls for descendants that are still natively focusable.

In markup

<button>
  Details <a href="/terms">terms</a>
</button>

<button>Details</button>
<a href="/terms">terms</a>

The requirement behind it

This rule is one way of failing the following WCAG 2.2 success criteria. The W3C, which writes the standard, explains each of them:

• 4.1.2 Name, Role, Value (opens in new tab) — WCAG level A

Further reading

Deque University on nested-interactive (opens in new tab)

Deque maintains axe-core, the open-source engine our scanner runs. Their page documents the rule as the engine implements it.

Automated checks find failures a browser can prove. They cannot judge whether a caption is accurate, whether an alt text is useful, or whether a page can be operated end to end with a keyboard — those need a person.