Open In App

HTML | aria-labelledby attribute

Improve
Improve
Like Article
Like
Save
Share
Report

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>


 

 



Last Updated : 15 Jul, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads