Identifies the element (or elements) that labels the current element. See related aria-describedby.
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.
If the interface is such that it is not possible to have a visible label on the screen, authors SHOULD use aria-label and SHOULD NOT use aria-labelledby. 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: The expected spelling of this property in U.S. English is “labeledby.” However, the accessibility API features to which this property is mapped have established the “labelledby” spelling. This property is spelled that way to match the convention and minimize the difficulty for developers.
HTML Example 1
<figure aria-labelledby="operahouse_1" role="group">
<img src="/operahousesteps.jpg" alt="The Sydney Opera House">
<figcaption id="operahouse_1">We saw the opera <cite>Barber of Seville</cite> here!</figcaption>
HTML Example 2
<div role="navigation" aria-labelledby="nav-heading">
<h2 id="nav-heading">Learn About This Product</h2>
HTML Example 3
<label id="tp1-label" for="first">First Name:</label>
<input type="text" id="first" name="first" size="20"
<div id="tp1" class="tooltip"
aria-hidden="true">Your first name is optional</div>
Associating Headings With Regions Example
In the example below, header elements are associated with the content they head. Note that the region being referenced is the region that contains the header.
<div role="main" aria-labelledby="foo">
<h1 id="foo">Wild fires spread across the San Diego Hills</h1>
Strong winds expand fires ignited by high temperatures ...