86

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?

Volker E.
  • 5,911
  • 11
  • 47
  • 64
Ian Y.
  • 2,293
  • 6
  • 39
  • 55
  • 1
    http://www.w3.org/TR/2010/WD-wai-aria-20100916/states_and_properties#aria-labelledby – Sarfraz Jun 22 '12 at 08:09
  • 8
    Thanks @Sarfraz. However, that page doesn't illustrate the purpose of such a use on already labeled input elements. – Ian Y. Jun 22 '12 at 08:25

2 Answers2

71

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.

BrendanMcK
  • 14,252
  • 45
  • 54
  • 12
    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 s, he said use it only when we need to label an with multiple – Ian Y. Jun 23 '12 at 01:28
  • 1
    [More than one LABEL may be associated with the same control by creating multiple references via the for attribute](http://www.w3.org/TR/1999/REC-html401-19991224/interact/forms.html#h-17.9.1). Ok, WAVE/WebAIM doesn't like it, and it turns out [there's an issue with UA support](http://webaim.org/discussion/mail_thread?thread=4307). 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](http://www.paciellogroup.com/blog/aria-tests/aria-labelledby-input.html). – sourcejedi Sep 12 '12 at 14:19
  • 1
    this link MUST be here: https://developer.mozilla.org/en-US/docs/Accessibility/ARIA – Facundo Colombier Nov 29 '13 at 14:37
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.

user2323922
  • 95
  • 1
  • 3
  • 2
    Does it focus the element when clicked like the for attribute does? I'm guessing not – Dominic Nov 17 '15 at 14:44
  • 6
    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. – Gust van de Wal Mar 11 '19 at 11:10
  • 1
    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 :) – Michael Dec 02 '19 at 11:07