• Success Criterion 4.1.2
  • Conformance level A

Nested Interactive Elements Causing a Double Role Announcement

4.1.2 — Name, Role, Value

Scenario

Setting

A survey tool's question builder

What’s wrong

Nested or redundant interactive semantics causing double role announcements (button inside a link, duplicate role attributes on wrapper and child).

Example 

<a href="/questions/58/edit" class="question-card">
  <h3>What's your favorite feature?</h3>
  <button onclick="deleteQuestion(58); event.stopPropagation();">Delete</button>
</a>
<!-- a button nested inside a link; assistive tech exposes conflicting nested-interactive semantics
     and some screen readers announce or navigate to both inconsistently -->

Why it matters

A screen reader user trying to delete a question may instead activate the whole card link, opening the editor.

How to test

Inspect nested interactive elements in DevTools (e.g., a button inside a link, or duplicate role attributes): if a screen reader announces two roles for one control, it fails.

How to fix

Never nest one interactive element inside another; place the link and the button as siblings instead.

<div class="question-card">
  <a href="/questions/58/edit"><h3>What's your favorite feature?</h3></a>
  <button onclick="deleteQuestion(58)">Delete</button>
</div>

Outcome

A survey builder deletes the right question without accidentally opening its editor.

Who is affected

Screen reader users managing survey questions cannot reliably trigger the delete button nested inside the card link.

Learn more

Related scenarios