bootstrap中的 form表單屬性role="form"的作用詳解
html 里面的 role 本質(zhì)上是增強(qiáng)語(yǔ)義性，當(dāng)現(xiàn)有的HTML標(biāo)簽不能充分表達(dá)語(yǔ)義性的時(shí)候，就可以借助role來(lái)說(shuō)明。通常這種情況出現(xiàn)在一些自定義的組件上，這樣可增強(qiáng)組件的可訪(fǎng)問(wèn)性、可用性和可交互性。
role的作用是描述一個(gè)非標(biāo)準(zhǔn)的tag的實(shí)際作用。比如用div做button，那么設(shè)置div 的 role=“button”，輔助工具就可以認(rèn)出這實(shí)際上是個(gè)button
比如，
<div role="checkbox" aria-checked="checked"></div>
輔助工具就會(huì)知道，這個(gè)div實(shí)際上是個(gè)checkbox的角色，為選中狀態(tài)。
role是無(wú)障礙閱讀，是給有閱讀障礙的人設(shè)置的屬性，有閱讀障礙的人可以用讀屏軟件來(lái)解析，跟正常人沒(méi)多大關(guān)系?？梢圆辉O(shè)置，不設(shè)置的話(huà)讀屏軟件就無(wú)法解析，有閱讀障礙的人也就"看"不了了。
既然是個(gè)良好的編程習(xí)慣,那么是不是所有標(biāo)簽都寫(xiě)role比較好呢?
比如
<div role = "div"></div>
正常的文本本來(lái)就可以讀，但是表單中有時(shí)候輸入密碼框前面并沒(méi)有密碼的提示，提示在框內(nèi)用Placeholder寫(xiě)的，正常人知道這里輸入密碼，可是讀不出來(lái)，這時(shí)候這個(gè)東西就起作用了。
屬性role的存在，是為了告訴Accessibility類(lèi)應(yīng)用（比如屏幕朗讀程序，為盲人提供的訪(fǎng)問(wèn)網(wǎng)絡(luò)的便利程序），這是一個(gè)按鈕。在html5元素內(nèi)，標(biāo)簽本身就是有語(yǔ)義的，因此role是不必添加的，至少是不推薦的，但是bootstrap的案例內(nèi)很多都是有類(lèi)似的屬性和聲明的，目的是為了兼容老版本的瀏覽器（用戶(hù)代理），如果你的代碼使用了html5標(biāo)簽，并且不準(zhǔn)備支持老版本的瀏覽器，不妨不使用role標(biāo)簽。
以上所述是小編給大家介紹的bootstrap中的 form表單屬性role="form"的作用詳解，希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
相關(guān)文章
JS基于Ajax實(shí)現(xiàn)的網(wǎng)頁(yè)Loading效果代碼
這篇文章主要介紹了JS基于Ajax實(shí)現(xiàn)的網(wǎng)頁(yè)Loading效果代碼,通過(guò)時(shí)間函數(shù)結(jié)合數(shù)學(xué)運(yùn)算實(shí)現(xiàn)頁(yè)面樣式的動(dòng)態(tài)變換技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
js控制滾動(dòng)條滾動(dòng)的兩種簡(jiǎn)單方法
這篇文章主要給大家介紹了關(guān)于js控制滾動(dòng)條滾動(dòng)的兩種簡(jiǎn)單方法,通過(guò)JavaScript可以直接控制滾動(dòng)條的位置,從而達(dá)到鎖定滾動(dòng)條的效果,文中通過(guò)示例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
Bootstrap 是一個(gè)用于快速開(kāi)發(fā) Web 應(yīng)用程序和網(wǎng)站的前端框架。這篇文章主要介紹了BootStrap的JS插件之輪播效果案例詳解的相關(guān)資料,需要的朋友可以參考下2016-05-05
JavaScript高級(jí)程序設(shè)計(jì) 閱讀筆記（十七） js事件
IE中是冒泡型事件，即從最特定的事件目標(biāo)到最不特定的事件目標(biāo)2012-08-08
JavaScript使用setInterval()函數(shù)實(shí)現(xiàn)簡(jiǎn)單輪詢(xún)操作的方法
這篇文章主要介紹了JavaScript使用setInterval()函數(shù)實(shí)現(xiàn)簡(jiǎn)單輪詢(xún)操作的方法,以實(shí)例形式分析了輪詢(xún)操作的原理與javascript實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-02-02
中文亂碼在Java Web開(kāi)發(fā)中經(jīng)常出現(xiàn)，這是由于不同的部分編碼不一樣造成的，一般在開(kāi)發(fā)中，我們把所有能設(shè)編碼的地方，全部設(shè)置成UTF-8，但是有時(shí)候還是會(huì)出現(xiàn)亂碼的情況。下面通過(guò)本文給大家分享JS外部文件中文注釋出現(xiàn)亂碼的解決方案，一起看看吧2017-07-07
Bootstrap作品展示站點(diǎn)實(shí)戰(zhàn)項(xiàng)目2
這篇文章主要為大家分享了Bootstrap作品展示站點(diǎn)實(shí)戰(zhàn)項(xiàng)目，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
JavaScript分水嶺CommonJS對(duì)比ES模塊分析
這篇文章主要為大家介紹了JavaScript分水嶺CommonJS對(duì)比ES模塊分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
用js寫(xiě)一段小程序，但是又覺(jué)得使用瀏覽器去運(yùn)行挺麻煩的，下面為大家介紹下如何使用java程序調(diào)用javascript程序，有類(lèi)似需求的朋友可以參考下哈，希望對(duì)大家有所幫助2013-07-07
一文教會(huì)你從零開(kāi)始畫(huà)echarts地圖
ECharts是一個(gè)使用JavaScript實(shí)現(xiàn)的開(kāi)源可視化庫(kù),涵蓋各行業(yè)圖表,滿(mǎn)足各種需求,下面這篇文章主要給大家介紹了如何從零開(kāi)始畫(huà)echarts地圖的相關(guān)資料,需要的朋友可以參考下2022-04-04