HTML | aria-labelledby attribute

15 Jul, 2021
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>
 
 
anikaseth98
CSS-Properties
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
Design a Tribute Page using HTML & CSS
How to set space between the flexbox ?
How to Upload Image into Database and Display it using PHP ?
Build a Survey Form using HTML and CSS
Installation of Node.js on Linux
Difference between var, let and const keywords in JavaScript
How to fetch data from an API in ReactJS ?
Differences between Functional Components and Class Components in React
Remove elements from a JavaScript Array