v133 · web components

ARIA Live Bridge

Shows aria-describedby and aria-controls pointing into a shadow DOM via shadowrootreferencetarget, plus a live region inside a shadow root that external code can reference — the pattern screen readers need.

checking reference-target… checking Shadow DOM…

Without reference target, aria-describedby="id" only resolves IDs in the same shadow tree. With shadowrootreferencetarget, an external ID can point into the shadow DOM — the component author controls which internal element is the target.

Demo 1 — aria-describedby across shadow boundary

Without reference-target broken

The aria-describedby ID refers to an element inside the shadow root. Without reference-target it resolves to nothing.

ARIA description resolved: ✗ not resolved

With reference-target Chrome 133

shadowrootreferencetarget="inner-desc" lets the external aria-describedby find the element inside.

ARIA description resolved: ✓ resolved to inner element

Demo 2 — aria-controls and live region inside shadow DOM

An external button has aria-controls="live-widget". The widget is a custom element with a live region inside its shadow root. Click the button to trigger a shadow-DOM update that screen readers can announce via the cross-root ARIA bridge.

External controller (light DOM)

This button has aria-controls="live-widget".
#live-widget is a custom element.

Shadow DOM component

Event log

Interact with the demos above…