1、用于表示一个普通的标签，使之语义化，方便浏览器对其具体功能进行识别。比如：
<div role="button"></div>，也即是将div元素转换为button按钮功能进行使用；
<div role="navigation"></div>，把div元素转换为navigation导航功能使用；
<div role="checkbox" aria-checked="checked"></div>，把div元素转换为checkbox复选框功能使用；
<a role="button" class="btn btn-default" href="#" >链接</a>，把a链接元素转换为button按钮功能使用。
2、<button role="button"></button>这种情况之下，role就可以省略，因为在此处是没有意义的，本身<button>就已经是button按钮。