6

HTML | aria-labelledby attribute

 4 years ago
source link: https://www.geeksforgeeks.org/html-aria-labelledby-attribute/
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client
aria-labelledby attribute
Related Articles
HTML | aria-labelledby attribute
  • Last Updated : 01 Nov, 2019

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>

    Output:
    Screenshot-from-2019-10-07-13-26-59.png

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

    Output:
    Screenshot-from-2019-10-07-13-53-18.png

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

    Output:
    Screenshot-from-2019-10-07-20-38-24.png

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

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK