Detailed description of the aria-label and aria-labelledby applications of Bootstrap, arialabelbootstrap

Source: Internet
Author: User

Detailed description of the aria-label and aria-labelledby applications of Bootstrap, arialabelbootstrap


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:

<! DOCTYPE html> 

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:

<Body> <form role = "form"> <div class = "form-group col-lg-3 form-horizontal"> <div class = "col-lg-7"> <input type = "text" id = "idCard" class = "form-control" aria-label = "id card number"> </div> </form> </body>

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"

<Body> <div class = "dropdown"> <button type = "button" class = "btn dropdown-toggle" id = "dropdownMenu1" data-toggle = "dropdown"> select your position <span class = "caret"> </span> </button> <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dropdownMenu1"> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> Test Engineer </a> </li> <li role = "presentation"> <a role = "menuitem" tabindex = "-1" href = "#"> Development Engineer </a> </li> <li role =" presentation "> <a role =" menuitem "tabindex ="-1 "href =" # "> sales engineer </a> </li> </ul> </div> </body>

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 help House website.

Articles you may be interested in:
  • ServerVariables set to retrieve predefined Environment Variables
  • Php Undefined index and Undefined variable solution
  • You * might * want to use the less safe log_bin_trust_function_creators variable
  • Request. ServerVariables []
  • PHP prompts Notice: Undefined variable solution
  • Use c ++ 11 to build a good variant Method
  • MariaDB (Mysql Branch) my. cnf configuration file Chinese comments
  • Differences between MySQL and mariadb

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