HTML | aria-labelledby attribute

The aria-labelledby attribute is an inbuilt attribute in HTML that is used to create relationships between objects and there labels. When any element containing both the attribute aria-labelledby and aria-label attribute the browsers 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 =""> Conetent </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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

  • Radio Groups: In this example, the radio group of a button is in relation with the container head.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!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>

    chevron_right

    
    

    Output:

  • Dialog Label: In this example relation established between dialog and the header element.
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <div role="dialog" aria-labelledby="dialogheader">
        <dialog id="dialogheader">Choose a File</dialog>
        A Computer Science Portal
    </div>

    chevron_right

    
    

  • 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

  • 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:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    

  • Menus: In the example below, a popup menu is associated with its label using the aria-labelledby attribute
    Example:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <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>

    chevron_right

    
    



My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.