Functionality of "aria-labelledby" attribute

Question

When I was doing some web development, an attribute named aria-labelledby has cropped up frequently. For example in bootstrap offical example:

<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

After doing some research I know it is accessibility related, but not many clues of the exact functionality of the attribute.

Many thanks.

Answer 1

There is always UA support issues with anything new so that is why developers look to the progressive enhancement. This ARIA technique provides the ability to do away with the “for” attribute and allows other elements to become part of the rich form. These techniques will become common practice.

There are some good examples of its use at Mozilla Developer pages. Perhaps the best of their examples is where it's used to associate a popup menu with the parent menu item.

Reference: Also, this appears to be a duplicate of the this question.

Answer 2

ARIA stands for "Accessible Rich Internet Applications".

Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities.

aria-label is an HTML attribute that screen readers can read, so that visually challenged users can hear the content. This provides a mean for the challenged user to have similar experience as other users.

Similarly, aria-labelledby is another HTML attribute that takes a value as the ID of some other element and label the element with the content of the other element.

<div id="dLabel">This is the reference</div>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">

Therefore, when the screen reader read the ul element, it will read the content of the div with id="dLabel"