- 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
Open a hospital's patient portal appointment scheduler and this is what you'll see: web components with closed shadow DOM (hidden internal code) leaking no semantics (no ElementInternals/ARIA reflected).
Why it matters
Screen-reader and voice-control users who can operate only what the accessibility tree exposes. The practical effect on a hospital's patient portal appointment scheduler: they have to work around the barrier just to continue.
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).
Outcome
That one change on a hospital's patient portal appointment scheduler means they move past the barrier without workarounds.
Who is affected
Screen-reader and voice-control users who can operate only what the accessibility tree exposes.
Learn more
- Understanding Understanding document (opens in a new tab)
Related scenarios
- Custom Dropdown or Slider With No Accessibility API Support
- Content Changes That Never Update Their Accessible Name
- Scripted Link or Button With No Real Role or Keyboard Support
- Clickable Div Turned Into a Control but Given No ARIA Role
- Form Field With No Programmatic Label at All
- Assistive Technology Never Told Which Element Currently Has Focus