Labeling an Element using aria-labelledby

The aria-labelledby attribute is used to specify the element or elements that provide a label for the element it is applied to. This is helpful when an element does not have native support for associating labels with it. The accessible name for an element is what is used to identify the element for assistive technologies such as screen readers. Some elements, like buttons and links, get their accessible name from their inner content, while others, like textareas and tables, get it from associated elements like labels or captions. All interactive elements must have an accessible name, and aria-labelledby allows you to reference other elements in the document to define the name for an element. If there is no content that can be referenced, you can use the aria-label attribute instead. If both aria-labelledby and aria-label are set, aria-labelledby will be used. The aria-describedby attribute is similar to aria-labelledby, but it is used to reference longer content that provides a description of the element, rather than just a brief label.

Working Example

How is the following link announced by screen readers?

Google
No, Bing!

Is this what you expected?

Code

<p>
  How is the following link announced by screen readers?
</p>
<a aria-labelledby="bing" href="...">Google</a>
<div id="bing">
  No, Bing!
</div>
<p>
  Is this what you expected?
</p>
#bing {
  display: none;
}
NIL