本文主要是介绍Html/Css_ 拾遗 role属性的作用，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
原文地址：http://blog.csdn.net/annip/article/details/53455226
一.什么是role属性
role属性作用是告诉Accessibility类应用（比如屏幕朗读程序，为盲人提供的访问网络的便利程序），这个元素所扮演的角色，主要是供残疾人使用。使用role可以增强文
本的可读性和语义化。
在html5元素内，标签本身就是有语义的，因此role是不必添加的，至少是不推荐的，但是bootstrap的案例内很多都是有类似的属性和声明的，目的是为了兼容老版本的
浏览器（用户代理），如果你的代码使用了html5标签，并且不准备支持老版本的浏览器，不妨不使用role标签。
二.什么时候使用role？
role的发挥的作用是供有障碍的人士使用，但这并不意味着每个标签都需要增加role属性，因为对于正常的文本本来就可读。role属性的应用主要是表单，比如输入密码，
对于正常人可以用placaholder提示输入密码，但是对于残障人士是无效的，这个时候就需要role了。另外，在老版本的浏览器中，由于不支持HTML5标签，所以有必要使用
role属性。
三.role的属性值
具体参考w3c发布的WAI-ARIA 1.0 User Agent Implementation Guide中的role Map部分 https://www.w3.org/TR/wai-aria/roles
四.示例
示例一：
<div role="checkbox" aria-checked="checked"></div>告诉屏幕阅读器，此处有一个复选框，且已经被选中。
示例二：
<div class="container">
<button class="btn">基础按钮</button>
<a class="btn" role="button">A标签按钮</a>
<input type="button" class="btn" value="input标签"/>
</div>
使用bootstrap布局，用role 给 a标签增加明确的语义。
这篇关于Html/Css_ 拾遗 role属性的作用的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
