html 裡面的 role 本質上是增強語意性,當現有的HTML標籤不能充分錶達語意性的時候,就可以藉助role來說明。通常這種情況出現在一些自訂的元件上,這樣可增強元件的可存取性、可用性和可互動性。
role的作用是描述一個非標準的tag的實際作用。例如用p做button,那麼設定p 的role=“button”,輔助工具就可以認出這實際上是個button
比如,
<p role="checkbox" aria-checked="checked"></p>
輔助工具就會知道,這個p其實是個checkbox的角色,為選取狀態。
role是無障礙閱讀,是給有閱讀障礙的人設定的屬性,有閱讀障礙的人可以用讀屏軟體來解析,跟正常人沒什麼關係。可以不設置,不設置的話讀屏軟體就無法解析,有閱讀障礙的人也就"看"不了了。
既然是個良好的程式設計習慣,那麼是不是所有標籤都寫role比較好呢?
例如
<p role = "p"></p>
正常的文字本來就可以讀,但是表單中有時候輸入密碼框前面並沒有密碼的提示,提示在框內用Placeholder寫的,正常人知道這裡輸入密碼,可是讀不出來,這時候這個東西就運作了。
屬性role的存在,是為了告訴Accessibility類應用(例如螢幕朗讀程序,為盲人提供的存取網路的便利程序),這是一個按鈕。在html5元素內,標籤本身就是有語義的,因此role是不必添加的,至少是不推薦的,但是bootstrap的案例內很多都是有類似的屬性和聲明的,目的是為了兼容舊版本的瀏覽器(用戶代理),如果你的程式碼使用了html5標籤,並且不準備支援舊版的瀏覽器,不妨不使用role標籤。
更多bootstrap中的 form表單屬性role="form"有什麼作用相關文章請關注PHP中文網!