Do not nest interactive controls

WCAG 4.1.2
Name, Role, Value

Content available in English only.

Accessibility isn’t just about avoiding violations — it’s about ensuring that everyone can use your product with confidence. This guide explains each rule’s intent, highlights common issues, and shows how to fix them according to WCAG and the European Accessibility Act (EAA).

These guidelines do not replace the official WCAG standards. They’re concise, developer-focused notes to help you identify and fix issues effectively.

If it can be clicked or focused — it must stand alone.

Why this matters and how to fix it

Why this matters

Interactive elements such as links, buttons, and form controls are meant to be independent focusable controls. If one is nested inside another (e.g., a button inside a link), assistive technologies and browsers cannot determine which element should receive focus, activation, or accessible name. This leads to unpredictable behavior, double activation, or broken keyboard navigation.

How to fix this issue

Ensure each interactive control stands alone. Do not wrap <button>, <input>, <select>, <textarea>, or clickable elements inside <a>, <button>, <label>, or any element with role='button', role='link', or `tabindex='0'`. Convert the parent to a non-interactive container or move the interaction behavior to a single element.

Automated detection · Manual review recommended

Developer guidance

This commonly happens in card components where both the container and a child element are clickable. Make one element the interactive control — not both. Detect nested interactive elements early using the GetWCAG automated scanner or enforce restrictions in your component library.

Code examples

Incorrect Implementation

<a href="/product">
  <button>Buy</button>
</a>

Correct Implementation

<button>Buy</button>

Real-World Examples

Before

<div class="card" role="button" tabindex="0">
  <a href="/profile">View profile</a>
</div>
<!-- Screen readers: cannot determine which to activate -->

After

<a class="card" href="/profile">
  <span>View profile</span>
</a>
<!-- One single clear interactive control -->

CSS Example (Guidance)

/* If you need a card to look like a button or link, style it — don't nest */
.card {
  display: block;
  padding: 1rem;
  border-radius: 8px;
  text-decoration: none;
  background: var(--surface);
}

Manual testing

  1. 1. Press TAB to move through the page.
  2. • If you must press TAB twice inside a single visual component, it may contain nested interactive elements.
  3. 2. Inspect clickable elements in DevTools.
  4. • Look for <button> inside <a>, <a> inside <button>, or clickable elements nested inside roles like 'button' or 'link'.
  5. 3. Using a screen reader (NVDA or VoiceOver), navigate to the element.
  6. • Expected: One clear name + one activation method.
  7. • Failure: Screen reader announces multiple controls or confusing roles.
  8. 4. Fix by choosing ONE element to carry the interaction behavior.
eu icon getwcag

Trusted by organizations across Europe working toward WCAG and EAA conformance