The aria-labelledby attribute is an inbuilt attribute in HTML that is used to create relationships between objects and their labels. When any element containing both the attribute aria-labelledby and aria-label attribute the browser’s high priority will be aria-labelledby without any doubt. This aria-labelledby attribute can be used with any typical HTML form element; it is not limited to elements but aria-label attribute we should be careful while using aria-label as it does not work with all HTML elements.
Syntax:
<element aria-labelledby =""> Content </element >
Parameters: A space-separated list of all the element IDs.
Below is 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:
HTML
<!DOCTYPE html><html>
<head>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div id="myBillingId"><h4>Billing of Course</h4></div>
<br>
<div>
<div id="myNameId">Stu_ID:
<input type="text"
aria-labelledby="myBillingId myNameId" />
</div>
</div>
<div>
<div id="myCourseId">Course:
<input type="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:
HTML
<!DOCTYPE html><html>
<head>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<div role="main" aria-labelledby="geeks">
<h1>GeeksforGeeks</h1>
<h4 id="geeks">A Computer Science Portal for Geeks</h4>
The articles are reviewed by reviewers and then published.
The reviewers basically check for correctness and basic
plagiarism.
</div>
</body>
</html>
|
Output:
-
Radio Groups: In this example, the radio group of a button is in relation with the container head.
Example:
HTML
<!DOCTYPE html><html>
<head>
<style>
body {
text-align: center;
}
h1 {
color: green;
}
</style>
</head>
<body>
<h1>GeeksforGeeks</h1>
<div id="radio_label">My radio labels</div>
<ul role="radiogroup" aria-labelledby="radio_label">
<li role="radio">
<input type="radio">Geeks</li>
<li role="radio">
<input type="radio">For</li>
<li role="radio">
<input type="radio">Geeks</li>
</ul>
</body>
</html>
|
Output:
-
Dialog Label: In this example relation is established between dialog and the header element.
Example:
HTML
<div role="dialog" aria-labelledby="dialogheader">
<dialog id="dialogheader">Choose a File</dialog>
A Computer Science Portal
</div>
|
-
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:
HTML
<p>The articles are reviewed by reviewers and then
<dfn id="placebo">placebo</dfn>, published.
<span role="definition" aria-labelledby="placebo">
The reviewers basically check for correctness and basic plagiarism.</span>
</p>
|
-
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:
HTML
<dl>
<dt id="Geeks">Geeks</dt>
<dd role="definition" aria-labelledby="Geeks">
The articles are reviewed by reviewers and then published.
</dd>
<dd role="definition" aria-labelledby="Geeks">
The reviewers basically check for correctness and basic plagiarism.
</dd>
<dt id="GFG">GfG</dt>
<dd role="definition" aria-labelledby="GFG">
The articles are reviewed by reviewers and then published.
</dd>
<dd role="definition" aria-labelledby="GFG">
The reviewers basically check for correctness and basic plagiarism.
</dd>
</dl>
|
-
Menus: In the example below, a popup menu is associated with its label using the aria-labelledby attribute
Example:
HTML
<div role="menubar">
<div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>
<div role="menu" aria-labelledby="fileMenu">
<div role="menuitem">GeeksforGeeks</div>
<div role="menuitem">Courses</div>
</div>
</div>
|