您看到的大多数角色都被定义为 ARIA 1.0 的一部分，然后通过支持规范（如 HTML-AAM）并入 HTML。一些新的 HTML5
元素（对话框、主等）甚至基于原来的 ARIA 角色。

http://www.w3.org/TR/wai-aria/

除了您的本机语义元素之外，还有一些使用角色的主要原因。

原因 #1。 覆盖没有合适的宿主语言元素的角色，或者由于各种原因，使用了语义上不太合适的元素。

在这个例子中，使用了一个链接，尽管最终的功能比导航链接更像按钮。

<a href="#" role="button" aria-label="Delete item 1">Delete</a>
<!-- Note: href="#" is just a shorthand here, not a recommended technique. Use progressive enhancement when possible. -->

屏幕阅读器用户会听到这是一个按钮（而不是链接），您可以使用 CSS 属性选择器来避免 class-itis 和 div-itis。

[role="button"] {
  /* style these as buttons w/o relying on a .button class */
}

[7 年后更新：删除 * 选择器以使一些评论者高兴，因为在 2020 年不需要属性选择器上需要通用选择器的旧浏览器怪癖。]

原因 #2。 备份原生元素的角色，以支持实现了 ARIA 角色但尚未实现原生元素角色的浏览器。

例如，浏览器多年来一直支持“主要”角色，但它是 HTML5 相对较新的补充，因此许多浏览器还不支持<main>.

  <main role="main">…</main>

这在技术上是多余的，但可以帮助一些用户并且不会伤害任何用户。几年后，这种技术可能对 main 来说变得不必要了。

原因#3。 7 年后（2020 年）更新：正如至少一位评论者指出的那样，这现在对自定义元素非常有用，并且正在进行一些规范工作以定义 Web
组件的默认可访问性角色。即使/一旦该 API 标准化，也可能需要覆盖组件的默认角色。

注意/回复

你还写道：

我看到有些人自己编的。这是否允许或正确使用角色属性？

除非不包括真正的角色，否则这是允许使用该属性的。浏览器将应用令牌列表中第一个识别的角色。

<span role="foo link note bar">...</a>

在列表之外，只有link和note是有效角色，因此链接角色将应用在平台可访问性 API 中，因为它先出现。如果您使用自定义角色，请确保它们不会与
ARIA 中定义的任何角色或您使用的宿主语言（HTML、SVG、MathML 等）冲突