HTML | aria-labelledby attribute
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 >w3wiki</ 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 = "Beginner" > < h1 >w3wiki</ h1 > < h4 id = "Beginner" >A Computer Science Portal for Beginner</ 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 >w3wiki</ h1 > < div id = "radio_label" >My radio labels</ div > < ul role = "radiogroup" aria-labelledby = "radio_label" > < li role = "radio" > < input type = "radio" >Beginner</ li > < li role = "radio" > < input type = "radio" >For</ li > < li role = "radio" > < input type = "radio" >Beginner</ 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 = "Beginner" >Beginner</ dt > < dd role = "definition" aria-labelledby = "Beginner" > The articles are reviewed by reviewers and then published. </ dd > < dd role = "definition" aria-labelledby = "Beginner" > 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" >w3wiki</ div > < div role = "menuitem" >Courses</ div > </ div > </ div > |