HTML | aria-labelledby attribute
Last Updated :
15 Jul, 2021
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 >
|
Share your thoughts in the comments
Please Login to comment...