Names, roles & states

A Control Sits Inside Another Control

When a button or link sits inside another clickable control, screen readers may skip the inner one, and keyboard users may never reach it.

nested-interactiveWCAG 2.0Introduced in WCAG 2.0.Level AA — the minimum. Missing it blocks people outright.

Status: SeriousSerious — Significant friction, or information that is lost.CurrentScanners run this rule today.
Owner: DesignDevTest
Audit: Automated+ManualA scanner finds it; a person confirms the fix.

Save as PDF

Why it matters

A control is anything you can click or press, like a button, link or checkbox. When one sits inside another, the browser treats the outer one as the whole thing. Screen readers often announce only the outer control and hide the inner one.

The inner control may also be missing from the Tab order, or pressing it may fire both actions. People using a screen reader or keyboard can't tell what will happen, or can't reach it at all.

Who it affects

Who it affects, and how much
Who	What they experience	Impact
Screen reader users	They hear one long mashed-together label and never find the inner button, such as "Delete" or "Add to favourites".	High impact
Keyboard-only users	Tab may skip the inner control, or Enter triggers the outer one instead.	High impact
Low-vision users (magnification)	Affected mainly if they also use a screen reader or keyboard.	Partial impact
Cognitive and neurodivergent users	It's unclear which action a click will do, so mistakes are easy.	Partial impact
Voice control users	Saying the inner control's name may click the outer one, or nothing at all.	Partial impact
Motor and dexterity	A slightly missed tap on the small inner button sets off the large outer action.	Partial impact

Business & product impact

Business & product impact, with how much each claim weighs
Area	Why	Impact
Legal	It fails WCAG 4.1.2 at Level A, the minimum. Complaints under Australia's Disability Discrimination Act point to WCAG 2.2 AA, and EN 301 549 applies in Europe.	High impact
Conversion	Clickable product cards with a hidden "Add to cart" or "Save" button lose actions people wanted to take.	Moderate impact
SEO	Search engines don't reward fixing this. Don't sell it as an SEO win.	Low impact
Brand trust	Controls that do the wrong thing feel broken to everyone, not just disabled users.	Moderate impact
Cost to fix	Often needs a small layout change in a shared card or row component. Fix it once there and it's fixed everywhere.	Moderate impact

Fixing it in code

A clickable card with a save button

Don't

<a href="/shoes/42" class="card">
  <h3>Trail runner</h3>
  <button>Save</button>
</a>

A screen reader says: “Trail runner Save, link”

<div class="card">
  <h3><a href="/shoes/42">Trail runner</a></h3>
  <button>Save</button>
</div>

A screen reader says: “Trail runner, link … Save, button”

Each control now stands on its own, so both can be found and pressed.

A list row made clickable with a role

Don't

<div role="button" tabindex="0">
  Invoice 108
  <a href="/invoice/108.pdf">Download</a>
</div>

A screen reader says: “Invoice 108 Download, button”

<div>
  <button>Invoice 108</button>
  <a href="/invoice/108.pdf">Download</a>
</div>

A screen reader says: “Invoice 108, button … Download, link”

Moving the link out of the button lets screen readers and the keyboard reach it.

Designer's handoff note

Don't design a whole card or row as one big click target with smaller buttons inside it.

Pick one main link, usually the title, and place other actions beside it. If the whole card must look clickable, ask dev to stretch the title link with CSS rather than wrap everything.

Quick test

Tool

The keyboard alone, then NVDA (opens in a new tab) (free on Windows)

Checklist

Step 1: Find a card or row that has a button inside it.
Step 2: Press Tab and watch where focus goes.
Step 3: Turn on NVDA and Tab again, listening to each stop.

Pass: Each control gets its own Tab stop and is announced with its own name and role.
Fail: The inner control is skipped, or you hear one long label for the whole card.

Check these at the same time

An element has an ARIA role that doesn't suit it aria-allowed-role
A button has no name a screen reader can say button-name
A link has no text a screen reader can read link-name

What a green scan still misses

A scanner finds controls inside controls in the code. It can't tell if a control built from plain div elements with click handlers is nested — for that, use the keyboard and listen.

Reference

Rule ID: nested-interactive
Raised by: axe-core: “Interactive controls must not be nested”
WCAG: 4.1.2 Name, Role, Value (opens in a new tab) · Level A · since WCAG 2.0
Other standards: EN 301 549 9.4.1.2 · RGAA 7.1.1
Read more: Deque University: nested-interactive (opens in a new tab)
Last reviewed: 14 October 2026