v133 · web components

Reference Target for Cross-root ARIA

Reference Target is a feature to enable using IDREF attributes such as `for` and `aria-labelledby` to refer to elements inside a component's shadow DOM, while maintaining encapsulation of the internal details of the shadow DOM. The main goal of this feature is to enable ARIA to work across shadow root boundaries.

concepts

  1. Reference Target

    reference-target lets shadow-DOM components expose an internal element as the target for external aria-* / for attributes. Fixes aria-labelledby across shadow boundaries.

  2. DS combobox

    External <label for> + aria-errormessage targeting an inner input inside a shadow root, via shadowrootreferencetarget. The accessibility case the spec leads with.

  3. Listbox & fieldset

    External aria-activedescendant resolves through the shadow boundary to an internal role="option". The composite-widget pattern that ARIA's group/listbox relies on.

  4. ARIA live bridge

    An external button's aria-controls targets a shadow-DOM widget's live region via shadowrootreferencetarget. Click to update the shadow-internal aria-live region — the pattern screen readers need for component-based UIs.

why it shipped

The Shadow DOM presents a problem for accessibility: there is not a way to establish semantic relationships between elements on in different shadow trees (such as via `aria-labelledby`). This limits the ability to design web components in a way that works with accessibility tools such as screen readers. The ARIAMixin IDL attributes (https://w3c.github.io/aria/#ARIAMixin) are a partial solution to the problem; however, they lack the ability to create a reference "into" a shadow tree from the outside. Reference Target is a solution to that missing piece of the problem. The specifics of the propo

references