What is the aria-labelledby attribute ?
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
Share your thoughts in the comments
Please Login to comment...