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標籤。