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