role属性作用是告诉Accessibility类应用（比如屏幕朗读程序，为盲人提供的访问网络的便利程序），这个元素所扮演的角色，主要是供残疾人使用。使用role可以增强文本的可读性和语义化。
在html5元素内，标签本身就是有语义的，因此role是不必添加的，至少是不推荐的，但是bootstrap的案例内很多都是有类似的属性和声明的，目的是为了兼容老版本的浏览器（用户代理），如果你的代码使用了html5标签，并且不准备支持老版本的浏览器，不妨不使用role标签。
二.什么时候使用role？
role的发挥的作用是供有障碍的人士使用，但这并不意味着每个标签都需要增加role属性，因为对于正常的文本本来就可读。role属性的应用主要是表单，比如输入密码，对于正常人可以用placaholder提示输入密码，但是对于残障人士是无效的，这个时候就需要role了。另外，在老版本的浏览器中，由于不支持HTML5标签，所以有必要使用role属性。
---------------------
作者：annip
来源：CSDN
原文：https://blog.csdn.net/annip/article/details/53455226?utm_source=copy
版权声明：本文为博主原创文章，转载请附上博文链接！
你好。使用role属性告诉辅助设备（如屏幕阅读器）这个元素所扮演的角色，属于WAI-ARIA. 例如点击的按钮，就是role="button"；会让这个元素可点击；
本质上是增强语义性，当现有的HTML标签不能充分表达语义性的时候，就可以借助role来说明。通常这种情况出现在一些自定义的组件上（例如一个tree组件，html里目前还没有tree这个标签），这样可增强组件的可访问性、可用性和可交互性。
如果我的回答没能帮助您，请继续追问。
一个例子：
它将向用户代理暗示，这是一个 note ，用来记录一些您需要留意的事情。
尽管 ARIA 非常有用，但我们必须注意何时以及如何使用它。
在 HTML 中使用 ARIA 的首要规则是尽量不要在 HTML 中使用 ARIA（如果不需要的话）。HTML5 语义元素为我们提供了一系列具有隐式含义的元素，类似于我们可以使用 ARIA 定义的显式含义，常被称为元素的 默认隐式 ARIA 语义 。
因此，只要有可能，我们就应该使用 HTML 语义元素来代替 ARIA 属性。
例如下面这个例子：
上面的写法是错误的，你不应该使用 <div> 和 ARIA role 来创建一个按钮。
我们应该只使用一个明确其语义的 <button> 元素，就像这样：
正如我们提到的，许多 HTML 语义元素对它们都有隐含的意义。
例如：
由于这些元素中的许多元素都具有隐含的含义，因此建议不要使用 ARIA role 来更改它们。以下是一个例子：
以上写法是错误的，我们应该使用适当的元素，而不是重新调整语义元素的用途。
或者，我们可以将 ARIA role 应用到一个没有任何含义的元素上（你觉得有必要的话），如 <span>。
其他一些冗余 ARIA 的示例：
HTML5 使用默认的隐式语义定义了一组新的结构和分段元素，这些语义与 ARIA role 匹配（在某些情况下）：
这意味着在实现后，浏览器将公开该元素的默认隐式语义，因此您不必这样做。
在元素上使用 ARIA role 并不足以真正改变元素的 role 。例如，如果我们试图将一个 <div> 更改为一个 <button>，则需要手动添加适合 <button> 的交互功能。
在 ARIA 指南中，有一个每个元素应该具有的功能列表。例如，一个有效的按钮必须满足以下要求：必须可以用光标、回车键、空格键单击（配合 JS 可以轻松实现）。
在使用 ARIA role 时，我们需要了解这些需求。使元素看起来像按钮并不能使它成为按钮。我们需要考虑所有媒介中的用户如何与元素交互。
ARIA role="presentation" 属性意味着元素仅用于视觉目的，并且不以任何方式交互。 aria-hidden="true" 属性表示元素不应可见。
当我们使用这些属性时，我们需要知道它们所应用到的元素以及它们的可见性和交互状态。例如，这两个按钮都会导致一些用户关注他们不存在的元素。
以上写法都是不正确，这些属性只能应用于非交互或不可见的元素。
可以与之交互的元素，例如按钮和链接，需要有一个 可访问的名称（Accessible Name） 。 可访问名称 是在可访问性 API 属性具有有效值时确定的。
可以根据元素的类型指定元素的可访问名称。例如，表单输入通常从相应的 <label> 元素获取其可访问的名称。
其他元素，例如按钮和链接，可以从它们的文本内容或标签属性中获得它们的可访问名称。
