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部分

<div role="checkbox" aria-checked="checked"></div>

告诉屏幕阅读器，此处有一个复选框，且已经被选中。

<marquee>...</marquee>普通卷动 <marquee behavior=slide>...</marquee>滑动 <marquee behavior=scroll>...</marquee>预设卷动 <marquee behavior=alternate>...</marquee>来回卷动 <marquee direction=down>...</marquee>向下卷动 <marquee direction=up>...</marquee>向上卷动 <marquee direction=right></marquee>向右卷动 <marquee direction=’left’></marquee>向左卷动 <marquee loop=2>...</marquee>卷动次数 <marquee width=180>...</marquee>设定宽度 <marquee height=30>...</marquee>设定高度 <marquee bgcolor=FF0000>...</marquee>设定背景颜色 html 里面的 r ole 本质上是增强语义性，当现有的 HTML 标签不能充分表达语义性的时候，就可以借助r ole 来说明。通常这种情况出现在一些自定义的组件上，这样可增强组件的可访问性、可用性和可交互性。 r ole 的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 r ole =“button”，辅助工具就可以认出这实际上是个button ​ bootstrap来自Twitter，是目前最受欢迎的前端框架。bootstrap是基于 html ,css,javascript的，它简单==简洁灵活，使Web开发更加快捷。 HTML 5 aria-* and r ole 在video-js的demo 中 看到了很多aria-*，不知道干嘛的。google一下，发现aria的意思是Accessible Rich Internet Application。 Accessible一般是为不方便的人士提供的功能，比如windows的放大镜，语音朗读，高对比度主题等。 主要内容是说明并演示了 HTML 5针对 html tag增加的 属性 ：r... 这些都是 HTML 5针对 html tag增加的 属性 ： aria的意思是Accessible Rich Internet Application。 Accessible一般是为不方便的人士提供的功能，比如屏幕阅读器。 r ole 的作用是描述一个非标准的tag的实际作用。比如用div做button，那么设置div 的 r ole ="button"，辅助工具就可以认出这实际上是个button。 我们使用r ole 属性 告诉辅助设备，这个元素所扮演的角色，比如点击的按钮，我们通常就使用r ole ="button",会让这个元素可点击。      但是它更多的是用来增强语义性，当现有的 html 标签不能充分表达语义性的时候，就可以借助r ole 来说明。通常它更多的出现在一些自定义的组件上。比如 html 中 没有tree标签，我们就可以把他的r ole 设置为tree，这样可以增强组件的可访问性、可用性和可交 定义一个form，语义说明这个标签是一个button，但是实际的效果还是 对于一些没有特别的标签特性的如div，span来说，这个r ole 就是一种定性的作用了，div标签上是没有任何特征的，就是一个块状元素，如果是在辅助设备上就会改变（如屏幕阅读器），记下来 ... 昨日浏览CSS Zen Garden网页源码，看到 html 文档 中 很有意思的 abbr 标签，和其他标签 中 的 r ole 属性 。记录一下并做个知识点小结。 HTML 缩写元素（<abbr>）用于代表缩写，有一个可选 属性 title。可以通过此 属性 提供完整的描述。注：若使用 title 属性 ，则它必须且仅可包含完整的描述内容。 You can use <abbr title="Cascading Style Sheets">CSS& r ole 是一个 HTML 5的 属性 ，r ole ="form"告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色是个表单，在button 中 r ole ="button"就是 告诉设备，这是个按钮，可以点击。本质上是增强语义性，增强组件的可访问性、可用性和可交互性 转载于:https://www.cnblogs.com/qianphon... 以下是一段代码：默认地址:加上css样式过后本应该是如下效果：可是实际的效果确实这样的：这是怎么回事呢， html 中 根本没有写，为什么会出现“保存信息”这四个字呢？后来才知道是因为网页使用了jQuery Mobile 框架。加上一句代码即可：data-r ole =”none”。后来就去找了一下有关于data-r ole 的文章，以下是对它的解释：“data-r ole ” 属性 是 HTML 5的一个新特征，通过设... r ole 属性 ： 本质上是增强语义性，当现有标签不能充分表达语义性的时候，就可以借助r ole 来说明。 同时也是为了告诉Accessibility类应用（如读屏软件为盲人提供的访问网络便利程序）， 在 html 5元素内，标签本身就有语义的，因此r ole 是不必添加的，至少是不推荐的， 但bootstrap的案例内很多都是有类似的 属性 和声明的，目的是为了兼容老版本浏览器， 如果你的代码使用了ht jQuery Data 属性 jQuery Mobile 使用 HTML 5 data-* 属性 来为移动设备创建更具触摸友好性和吸引性的外观。 在下面的参考列表 中 ，粗体显示的值为默认值。 在1.4 版本以后已废弃。使用 CSS 类 替代。带有 data-r ole =”button” 的超链接。button 元素、工具栏 中 的链接以及 input 字段都会自动渲染成按钮样式，不需要添加 data-r ole =”button”。 Data- 属性 data-corners true | false 规定按钮是否圆角 data-i 使用r ole 属性 告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色，属于WAI-ARIA. 例如点击的按钮，就是r ole ="button"；会让这个元素可点击；本质上是增强语义性，当现有的 HTML 标签不能充分表达语义性的时候，就可以借助r ole 来说明。通常这种情况出现在一些自定义的组件上（例如一个tree组件， html 里目前还没有tree这个标签），这样可增强组件的可访问性、可用性和可交互性。...