labelledby

Labelledby refers to the ARIA attribute aria-labelledby, which is used to define the label of an element by referencing other elements in the document. While the attribute in HTML is aria-labelledby, it is commonly described in practice as the labeledby property or simply labelledby.

The value of aria-labelledby is one or more element IDs, separated by spaces. The text content of the referenced elements is used as the label for the element bearing the attribute. If multiple IDs are provided, their corresponding label content is combined in the order listed. This mechanism allows complex or composite labels to be assembled from existing visible or accessible text.

Common use cases include labeling custom widgets, non-form controls, or regions that lack native label elements. aria-labelledby is particularly helpful for accessible naming of components such as custom buttons, sliders, tabs, dialogs, and grids where a single element cannot carry a sufficient label. It can reference multiple labels to construct a complete description.

Implementation notes: the IDs referenced by aria-labelledby must be unique within the document, and the referenced elements should provide meaningful, visible or otherwise accessible text. If a label is not available, aria-label can be used as a fallback. If the referenced content is hidden from assistive technologies, labeling effectiveness may be reduced. Overall, aria-labelledby provides a robust way to ensure elements have clear, programmatic labels for accessibility.