The aria-labelledby attribute is an inherent attribute in hypertext markup language that’s wont to produce relationships between objects and there labels. Once any component containing each the attribute aria-labelledby and aria-label attribute the browsers high priority are going to be aria-labelledby with none doubt. This aria-labelledby attribute may be used with any typical hypertext markup language kind element. It is not restricted to components however aria-label attribute we must always watch out whereas victimization aria-label because it doesn’t work with all HTML elements.
Syntax:
<element aria-labelledby =""> Content </element>
Parameters: A space-separated list of all the element IDs.
Following are some of the list of all the popular usage of aria-labelledby attribute:
-
Multiple Labels: Here each element is a field with both labels, the individual labels, and the group labels.
Example:
<!DOCTYPE html><html><head><style>body {text-align: center;}h1 {color: green;}</style></head><body><h1>GeeksforGeeks</h1><divid="myBillingId"><h4>Billing of the Course</h4></div><br><div><divid="myNameId">Student_ID:<inputtype="text"aria-labelledby="myBillingId myNameId"/></div></div><div><divid="myCourseId">Course:<inputtype="text"aria-labelledby="myBillingId myCourseId"/></div></div></body></html>Output:
-
Associating Headings With Regions: In this example, the header element is linked with the group head div, which makes the relation between the group head and the header element.
Example:
<!DOCTYPE html><html><head><style>body {text-align: center;}h1 {color: green;}</style></head><body><divrole="main"aria-labelledby="geeks"><h1>GeeksforGeeks</h1><h4id="geeks">A Computer Science Portal for Geeks</h4>The articles are reviewed by reviewers and then published.</div></body></html>Output:
-
Radio Groups: In this example, the radio group of a button is in relation to the container head.
Example:
<!DOCTYPE html><html><head><style>body {text-align: center;}h1 {color: green;}</style></head><body><h1>GeeksforGeeks</h1><divid="radio_label">My radio labels</div><ulrole="radiogroup"aria-labelledby="radio_label"><lirole="radio"><inputtype="radio">Geeks</li><lirole="radio"><inputtype="radio">For</li><lirole="radio"><inputtype="radio">Geeks</li></ul></body></html>Output:
-
Dialog Label: In this example relation established between dialog and the header element.
Example:
<divrole="dialog"aria-labelledby="dialogheader"><dialogid="dialogheader">Choose a File</dialog>A Computer Science Portal</div>Output:
-
Inline Definition: In the example below, the definition of a term that is described in the natural flow of the narrative is associated with the term itself using the aria-labelledby attribute.
Example:
<p>The articles are reviewed by reviewers and then<dfnid="placebo">placebo</dfn>, published.<spanrole="definition"aria-labelledby="placebo">The reviewers basically check forcorrectness and basic plagiarism.</span></p>Output:
-
Definition Lists: In the example below, the definitions in a formal definition list are associated with the terms they define using the aria-labelledby attribute.
Example:
<dl><dtid="Geeks">Geeks</dt><ddrole="definition"aria-labelledby="Geeks">The articles are reviewed by reviewersand then published.</dd><ddrole="definition"aria-labelledby="Geeks">The reviewers basically check forcorrectness and basic plagiarism.</dd><dtid="GFG">GfG</dt><ddrole="definition"aria-labelledby="GFG">The articles are reviewed by reviewersand then published.</dd><ddrole="definition"aria-labelledby="GFG">The reviewers basically check forcorrectness and basic plagiarism.</dd></dl>Output:
-
Menus: In the example below, a popup menu is associated with its label using the aria-labelledby attribute
Example:
<divrole="menubar"><divrole="menuitem"aria-haspopup="true"id="fileMenu">File</div><divrole="menu"aria-labelledby="fileMenu"><divrole="menuitem">GeeksforGeeks</div><divrole="menuitem">Courses</div></div></div>Output: