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

<div class="checkbox" onclick="toggle()"></div>

Why it matters

Screen-reader and voice-control users who can operate only what the accessibility tree exposes.

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

Un-nest interactive elements and remove duplicate roles so one control announces one role.

<input type="checkbox" id="opt-1">

<label for="opt-1">Email notifications</label>

A native input exposes its role and checked state automatically; a styled div exposes none of that without a lot of manual ARIA.

Outcome

On a survey tool's question builder, this barrier is gone for screen-reader and voice-control users who can operate only what the accessibility tree exposes — they get the same result as anyone else here.

Who is affected