Detailed description of Bootstrap's aria-label and aria-labelledby _ javascript skills

This article mainly introduces the detailed information about the Bootstrap's aria-label and aria-labelledby applications. For more information, see Aria-label

Normally, 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:

    
   demo  
          

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 attributes

When 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. As follows:
When ul gets the focus, the screen reader reads: "select your position"

  
   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.

The above content is the introduction of the Bootstrap's aria-label and aria-labelledby application. I hope this article will help you, at the same time, I would like to thank you for your constant support for the website.