aria-label
正常情況下，form表單的input組件都有對應的label.當input組件獲取到焦點時，屏幕閱讀器會讀出相應的label里的文本。
<!DOCTYPE html><html><head> <meta charset = "utf-8"> <title>demo</title> <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="external nofollow" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script> <script src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> <style type="text/css"> body{padding: 20px;} </style></head><body> <form role = "form"> <div class="form-group col-lg-3 form-horizontal"> <label for = "idCard" class="control-label col-lg-5">身份證號：</label> <div class="col-lg-7"> <input type = "text" id = "idCard" class="form-control"> </div> </div> </form></body></html>但是如果我們沒有給輸入框設置label時，當其獲得焦點時，屏幕閱讀器會讀出aria-label屬性的值，aria-label不會在視覺上呈現效果。
<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 = "身份證號"> </div> </div> </form></body>aria-labelledby<body> <div class="dropdown"> <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"> 選擇您的職位 <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1"> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >測試工程師</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >開發工程師</a> </li> <li role="presentation"> <a role="menuitem" tabindex="-1" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" >銷售工程師</a> </li> </ul> </div></body>
注：
如果一個元素同時有aria-labelledby和aria-label，讀屏軟件會優先讀出aria-labelledby的內容
總結
以上所述是小編給大家介紹的Bootstrap的aria-label和aria-labelledby屬性實例詳解，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對VeVb武林網網站的支持！
新聞熱點
疑難解答
