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?
Labels are important. They can create a logic connection between an element and its description. In the case of the <input> element we'll use the <label> element to describe what the <input> is about.
Importantly, aria-labelledby overrides all other name sources for an element. So, for example, if an element has both an aria-labelledby and an aria-label , or an aria-labelledby and a native HTML label , the aria-labelledby label always takes precedence.
Description: The WAI-ARIA 'aria-labelledby' attribute has a reference to an ID that does not exist or an ID that is not unique. Context: All ARIA tags must reference elements that exist on the page, an ID should only be used once on any given page.
aria-labelledby : Identifies the element (or elements) that labels the current element. aria-hidden (state) : Indicates that the element and all of its descendants are not visible or perceivable to any user as implemented by the author.
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.
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With