您好,登錄后才能下訂單哦!
這篇文章主要介紹了Bootstrap中aria-label和aria-labelledby屬性有什么用,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
aria-label
正常情況下,form表單的input組件都有對(duì)應(yīng)的label.當(dāng)input組件獲取到焦點(diǎn)時(shí),屏幕閱讀器會(huì)讀出相應(yīng)的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-JZR6Spejh5U02d8jOt6vLEHfe/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">身份證號(hào):</label> <div class="col-lg-7"> <input type = "text" id = "idCard" class="form-control"> </div> </div> </form> </body> </html>
但是如果我們沒有給輸入框設(shè)置label時(shí),當(dāng)其獲得焦點(diǎn)時(shí),屏幕閱讀器會(huì)讀出aria-label屬性的值,aria-label不會(huì)在視覺上呈現(xiàn)效果。
<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 = "身份證號(hào)"> </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" >開發(fā)工程師</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>
注:
如果一個(gè)元素同時(shí)有aria-labelledby和aria-label,讀屏軟件會(huì)優(yōu)先讀出aria-labelledby的內(nèi)容
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“Bootstrap中aria-label和aria-labelledby屬性有什么用”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。