The purpose of using "aria-labelledby" on already labeled input elements?

HtmlLabelAccessibilityWai Aria

Html Problem Overview


Many ARIA demonstration websites use code such as:

<label for="name" id="label-name">Your Name</label>
<input id="name" aria-labelledby="label-name" type="text">


But what's the purpose of using aria-labelledby attribute in this case? The input element has already been labeled by the label element which is using for attribute, isn't it?

Html Solutions


Solution 1 - Html

There's some good examples of its use at https://developer.mozilla.org/en/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute">Mozilla Developer pages. Perhaps the best of their examples is where it's used to associate a popup menu with the parent menu item - it's Example 7 in the page:

<div role="menubar">  
    <div role="menuitem" aria-haspopup="true" id="fileMenu">File</div>  
    <div role="menu" aria-labelledby="fileMenu">  
        <div role="menuitem">Open</div>  
        <div role="menuitem">Save</div>  
       <div role="menuitem">Save as ...</div>  
       ...  
    </div>  
    ...  

ARIA attributes tends to be of greatest use in building Accessible Rich Internet Applications: so long as you're sticking with standard semantic HTML - using forms with standards labels - you shouldn't need it at all: so there's no reason to use it on a LABEL/INPUT pair. But if you're building "rich UI" from scratch (DIVs and other low level elements with javascript adding interactivity), then it's essential for letting a screenreader know what the higher-level intent is.

Solution 2 - Html

There is always UA support issues with anything new so that is why developers look to the progressive enhancement. This ARIA technique provides the ability to do away with the “for” attribute and allows other elements to become part of the rich form. These techniques will become common practice.

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionIan Y.View Question on Stackoverflow
Solution 1 - HtmlBrendanMcKView Answer on Stackoverflow
Solution 2 - Htmluser2323922View Answer on Stackoverflow