What is the aria-labelledby attribute ?

09 Jul, 2020
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>     <div id="myBillingId"><h4>Billing of the Course</h4></div>     <br>     <div>         <div id="myNameId">Student_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:
Example:
<!DOCTYPE html> <html>   <head>     <style>         body {             text-align: center;         }                   h1 {             color: green;         }     </style> </head>   <body>     <h1>GeeksforGeeks</h1>     <div id="myBillingId"><h4>Billing of the Course</h4></div>     <br>     <div>         <div id="myNameId">Student_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:<!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.       </div> </body>   </html>Output:
Example:
<!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.       </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>     <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:
Example:
<!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 established between dialog and the header element.Example:<div role="dialog" aria-labelledby="dialogheader">     <dialog id="dialogheader">Choose a File</dialog>     A Computer Science Portal </div> Output:
Example:
<div role="dialog" aria-labelledby="dialogheader">     <dialog id="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     <dfn id="placebo">placebo</dfn>, published.           <span role="definition" aria-labelledby="placebo">         The reviewers basically check for        correctness and basic plagiarism.    </span> </p>Output:
Example:
<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>
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>     <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>Output:
Example:
<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>
Output:
Menus: In the example below, a popup menu is associated with its label using the aria-labelledby attributeExample:<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> Output:
Example:
<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> 
Output:
Akanksha_Rai
HTML-Attributes
Picked
HTML
Web Technologies
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.