demo · v135

aria-*Elements live

Chrome 135 reflects ARIA relationships as element-typed IDL properties: ariaLabelledByElements, ariaDescribedByElements, ariaControlsElements, etc. Cross-root, no IDs required. Type below and watch the input's accessible name update from a real element reference.

ariaLabelledByElements: ?

An external label paragraph (no id attribute, no for=).

state

click "apply" to assign the element reference

the code

// Before: needed an id on every label, plus aria-labelledby="…".
const para = document.querySelector("p.my-label");
const input = document.querySelector("input");
input.ariaLabelledByElements = [para];   // Element references, no id strings.
// Works across shadow roots too.
console.log(input.ariaLabelledByElements); // [<p>]

see also