Success Criterion 4.1.2
Conformance level A

Web Component Whose Shadow DOM Hides All Its Semantics

4.1.2 — Name, Role, Value

Scenario

Setting

A hospital's patient portal appointment scheduler

What’s wrong

Web components with closed shadow DOM (hidden internal code) leaking no semantics (no ElementInternals/ARIA reflected).

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 a web component's shadow DOM in DevTools' Accessibility panel: if no semantics (ElementInternals or reflected ARIA) are exposed from inside the shadow root, it fails.

How to fix

Expose semantics from web components (ElementInternals or reflected ARIA on the host).

<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 hospital's patient portal appointment scheduler, this barrier is gone for screen-reader and voice-control users who can operate only what the accessibility tree exposes — they reach the same outcome without extra effort.

Who is affected