Aria-label and aria-labelledby of Bootstrap

Aria-label and aria-labelledby of Bootstrap
Under normal conditions, the input component of the form has a corresponding label. When the input component gets the focus, the screen reader reads the text in the corresponding label. For example:

However, if we do not set a label for the input box, when it gets the focus, the screen reader will read the value of the aria-label attribute, and the aria-label will not be visually displayed. For example:

 

Aria-labelledby attributesWhen the expected label text already exists in other elements, you can use aria-labelledby and set its value to the id of all read elements. The screen reader reads: "select your position" when ul gets the focus"

Select your position

• Test Engineer
• Development Engineer
• Sales Engineer

PS: if an element contains both aria-labelledby and aria-label, the read screen software first reads the content of aria-labelledby.