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