v135 · dom

Element Reflection

This feature allows for ARIA relationship attributes to be reflected in IDL as element references rather than DOMStrings.

concepts

  1. aria*Elements live

    Set input.ariaLabelledByElements = [paragraph] at the click of a button and watch the accessible name update without any id shuffling.

  2. ARIA across shadow boundaries

    The AOM explainer's headline web-components scenario: a custom element's shadow-root input is labelled by paragraphs in the page's light DOM — impossible with id-based aria-labelledby, trivial with element references.

  3. Cross-tree reference graph

    Live SVG graph showing a custom combobox connecting to options across a shadow boundary. Toggle between element references and id-based aria-controls to see exactly which edges break under each approach.

  4. Form Association Explorer

    An accessible registration form where labels and descriptions are wired via ariaLabelledByElements and ariaDescribedByElements. A reflection table shows exactly what assistive technology would read for each control, with an error-state toggle.

  5. Tooltip factory

    A registration form stamped twice on the same page — showing why element references beat ID-based aria-describedby. Both instances wire their contextual help tooltips via ariaDescribedByElements with no ID conflicts. Switch between element reference and ID-based modes to see the reflection table change.

why it shipped

This would allow specifying semantic relationships between elements without the need to assign globally unique ID attributes to each element which participates in a relationship. Moreover, this would enable authors using open ShadowRoots to specify relationships which cross over Shadow DOM boundaries.

references