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?
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.