Attribute functionality "aria-labelledby"

Question

When I was doing web development, an attribute called aria-labelledby often came up. For example, in the original example:

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

After doing some research, I know that this is accessibility, but not many tips on the exact functionality of the attribute.

Thank you very much.

Answer 1

There are always problems with UA support with something new, so developers are looking at progressive improvement. This ARIA method provides the ability to remove the “for” attribute and allows other elements to become part of the rich form. These methods will become common practice.

There are some good use cases on Mozilla Developer . Perhaps the best of their examples is where he associated the popup menu with the parent menu item.

Link: Also, this seems like a duplicate of this question.

Answer 2

ARIA stands for "Affluent Rich Internet Applications."

Accessibility on the Internet refers to the inclusive practice of removing barriers to the interaction with websites or access to them with disabilities.

aria-label is an HTML attribute that screen readers can read so that viewers with a visual call can hear the content. This gives an average value for an experienced user who has similar experience with other users.

Similarly, aria-labelledby is another HTML attribute that takes a value as the identifier of another element and labels the element with the contents of another element.

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

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