Detailed description of the aria-label and aria-labelledby applications of Bootstrap, arialabelbootstrap
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:
<! 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
- Asp.net 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