Open In App

What is the aria-labelledby attribute ?

Improve
Improve
Like Article
Like
Save
Share
Report

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:

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

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

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

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

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

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

    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:



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