在bootstrap中,aria是“可訪問(wèn)的富互聯(lián)網(wǎng)應(yīng)用程序”的意思,是“Accessible Rich Internet Application”的縮寫,用于增強(qiáng)網(wǎng)頁(yè)在殘障輔助閱讀設(shè)備上的識(shí)別讀取,可彌補(bǔ)html和js可訪問(wèn)性方面的不足。
本教程操作環(huán)境:Windows10系統(tǒng)、bootstrap3.3.7版、DELL G3電腦
aria在bootstrap里是啥意思
aria是Accessible Rich Internet Application簡(jiǎn)稱,百度翻譯:可訪問(wèn)的富互聯(lián)網(wǎng)應(yīng)用程序。
此類屬性是為了增強(qiáng)網(wǎng)頁(yè)在殘障輔助閱讀設(shè)備上的識(shí)別讀取。
aria是一種比較新的輔助訪問(wèn)技術(shù),用來(lái)彌補(bǔ)html和js本身對(duì)可訪問(wèn)性方面的不足。支持aria并不是必須或者強(qiáng)制的,但是支持aria會(huì)讓你的應(yīng)用變得更友好,更健壯。
例如:
下面這個(gè)表單添加了aria-label屬性,那么當(dāng)頁(yè)面聚焦到此表單上時(shí),屏幕閱讀器會(huì)讀出 aria-label 屬性的值,aria-label 不會(huì)在視覺(jué)上呈現(xiàn)效果,只是方便設(shè)備讀取備注。
<input type="text" class="form-control" id="name" placeholder="請(qǐng)輸入名稱" aria-label="名稱">
擴(kuò)展知識(shí):
ARIA 為Web app提供滿足用戶不同需求的解決方案。建設(shè)起用戶和軟件之間的橋梁。
新的HTML5標(biāo)準(zhǔn)中增加 aria-* 的標(biāo)簽屬性,全稱Accessible Rich Internet Application。與role標(biāo)簽屬性配合使用。
role屬性表示一個(gè)非標(biāo)準(zhǔn)的tag的實(shí)際作用。比如用div做button,那么設(shè)置div 的 role=“button”,輔助工具就可以認(rèn)出這實(shí)際上是個(gè)button。而aria-*的作用就是描述這個(gè)tag在可視化的情境中的具體信息。
最簡(jiǎn)單的應(yīng)用比如,
<div role="checkbox" aria-checked="checked"></div>
輔助工具就會(huì)知道,這個(gè)div實(shí)際上是個(gè)checkbox的角色,為選中狀態(tài)。