More Ways to Label
Radiogroup and radio buttons should have a label that is visible and referenced using the aria-labelledby property.
The aria-describedby property is used to add additional information to the radio buttons or radiogroup.
**Note: ** ARIA is the only way to add accessible help or description text.
Different A11y Labels
- aria-label
- aria-labelledby
- aria-describedby
aria-label
aria-label allows us to specify a string that will act as the element's label. This is useful for things where graphics indicate a button's purpose.
A11y Hamburger Menu Label
<button aria-label="menu" class="hamburger"></button>
:button > name: "menu"
If the element has text inside of its tags, only the aria-label will be used. Useful for things like close menus which generally have an X put inside.
<button aria-label="close">X</button>
:button > name: "close"
aria-labeledby
Allows us to specify another element in the DOM as the element's label.
<span id="rg-label">Drink options</span>
<div role="radiogroup" aria-labelledby="rg-label">
...
</div>
: radio group > name: "Drink options"
aria-labelledby vs <label>
<div role="radio" aria-labelledby="lb01"></div>
<span id="lb01">Coffee</span>
<input type="radio" id="rb01">
<label for="rb01">Coffee</label>
aria-labelledby
- Can be used on any element
- Describes what is labeling it
- Doesn't allow the user to click the label to select the element
- Can compose labels from a list of other tags
- Can access tags that are otherwise hidden from assistive technology
- Always takes presidence over any other labels
<label>
- Can only be used on labellable elements such as an
input - Describes what is it labeling
- Can click the label to select the element
<div id="men-lbl">Men's T-Shirts</div>
<button id="men-btn" aria-labelledby="men=lbl men-btn">Shop Now</button>
: button > name: "Men's T-Shirts Shop Now"