Identifies the element (or elements) that labels the current element.

The purpose of aria-labelledby is the same as that of aria-label. It provides the user with a recognizable name of the object. The most common accessibility API mapping for a label is the accessible name property.

One or more ID properties may be specified. A list of ID properties is returned by Microsoft UI Automation.

In addition to providing the ariaLabelledby property, you should also use a label element to indicate a label for previous versions of the browser.

If the label text is visible on screen, authors should use aria-labelledby and should not use aria-label. Use aria-label only if the interface is such that it is not possible to have a visible label on the screen. As required by the text alternative computation, user agents give precedence to aria-labelledby over aria-label when computing the accessible name property.

The aria-labelledby attribute is similar to aria-describedby in that both reference other elements to calculate a text alternative, but a label should be concise, where a description is intended to provide more verbose information.

Note  Recursive use of ariaLabelledby is not supported. An element that is using ariaLabelledby should not reference another element that is also using ariaLabelledby.

Note  For cross-browser compatibility, always use the ARIA attribute syntax to access and modify ARIA properties, for example object.setAttribute("aria-valuenow", newValue).

Syntax

HTML
<element aria-labelledby="p" ... >
JavaScript
object.setAttribute("aria-labelledby",value);var value = object.getAttribute("aria-labelledby");