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

Question

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?

Solution 1

There's some good examples of its use at 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

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.

Comments

[Ian Y.]

Thanks @BrendanMcK. What you said is true. I had asked someone who works for ARIA and he, too, said there is no need to use aria-labelledby in this case. For labeling <input>s, he said use it only when we need to label an <input> with multiple <label>s. Here is an example he provided: html5accessibility.com/tests/mulitple-labels.html

[sourcejedi]

More than one LABEL may be associated with the same control by creating multiple references via the for attribute. Ok, WAVE/WebAIM doesn't like it, and it turns out there's an issue with UA support. But his suggestion is just strange, and I don't think it has any real advantage. At least IE<=8 doesn't support multiple IDs in aria-labelledby.

[Facundo Colombier]

this link MUST be here: developer.mozilla.org/en-US/docs/Accessibility/ARIA

[Dominic]

Does it focus the element when clicked like the for attribute does? I'm guessing not

[Gust van de Wal]

Completely false. The aria attributes are NOT supposed to replace other attributes as their sole purpose is to help make elements more accessible. Elements should NOT be focusable because of any aria attribute.

[Michael]

Common practice (sadly?) currently still is not true in my opinion. Best practice, might be a better choice. Maybe in the future, when it's common practice that highly advanced AI writes html instead of humans :)