ARIA Labeling

Proper labeling of all UI elements is needed in order to ensure the screen reader announces everything correctly. Here we describe the available options and how and when they should be used.

Labeling

There are several options for labeling:

Label element with labelFor attribute
- Single ID reference to the labeled control
- Reference is maintained on the label, not on the labeled control
- Multiple references are not possible
Example <Label text="Product price" required="true" labelFor="productPriceInput"/>
The aria-label attribute
- Text is directly provided in the attribute, no extra HTML control needed
- Attribute is maintained on the labeled control
- Only indirect support for multiple texts
The aria-labelledBy attribute
- Whitespace separated list of ID references to controls
- Attribute is maintained on the labeled control
- Explicitly designed for multiple references

Caution

The different options cannot be used in conjunction. There is a precedence rule, which determines how the labeling attributes are prioritized and read by the screen reader. As an application developer, you need to be aware of the order in which the labeling is read by your screen reader.