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

Source: Internet
Author: User
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.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.