arialabelledby

aria-labelledby is an accessibility attribute used in web development to provide an accessible name for an element by referencing the id(s) of other elements that contain label text. The accessible name is what screen readers announce to users, helping to convey the purpose of interactive controls and other elements.

The value of aria-labelledby consists of one or more id values separated by spaces. The text content of the referenced elements is concatenated in the order given to form the element’s accessible name. If a referenced element itself has its own label, the resulting name reflects that text as part of the overall label.

A common use is to pair a visible label with an element that has no visible label, such as a button that includes both a text label and an icon. For example: <button aria-labelledby="btnLabel btnIcon"> with elements like <span id="btnLabel">Submit</span> and <span id="btnIcon" aria-hidden="true">...</span>. The button’s accessible name will combine the text from the labeled elements.

Best practices include using aria-labelledby when there is existing visible text that should be reused as the label, which helps maintain consistency and reduces duplication. If a separate, specific label is needed for accessibility alone, aria-label can be used instead. aria-labelledby is supported by major assistive technologies and reacts to dynamic text changes, updating the accessible name accordingly as the labeled elements’ content changes.