我不断在某些人的工作中看到角色属性。我也使用它，但我不确定它的效果。

例如：

<header id="header" role="banner">
    Header stuff in here
</header>

艺术

<section id="facebook" role="contentinfo">
    Facebook stuff in here
</section>

艺术

<section id="main" role="main">
     Main content stuff in here
</section>

此角色属性是否必要？

此属性对语义更好吗？

它能改善搜索引擎优化吗？

可以在这里找到角色列表，但我看到有些人自己编造。这是允许的还是正确使用角色属性？

对此有什么想法吗？

网友回答：

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

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

虽然咏叹调的第一条规则规定：

如果您可以将本机 HTML 元素 [HTML51] 或属性与内置所需的语义和行为一起使用，而不是重新调整元素的用途并添加 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-it is和div-it is。

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

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

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

例如，“main”角色在浏览器中已经支持了很多年，但它是HTML5的一个相对较新的补充，所以许多浏览器还不支持语义。<main>

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

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

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

备注/回复

你还写道：

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

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

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

在列表中，只有 和 是有效角色，因此链接角色将在平台辅助功能 API 中应用，因为它排在第一位。如果您使用自定义角色，请确保它们不会与 ARIA 中的任何定义角色或您使用的主机语言（HTML、SVG、MathML 等）冲突。linknote

网友回答：

据我了解，角色最初是由XHTML定义的，但已被弃用。但是，它们现在由HTML 5定义，请参阅此处：https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header

role 属性的目的是通过解析软件确定元素（及其子元素）作为 Web 应用程序一部分的确切功能。这主要是作为屏幕阅读器的可访问性，但我也可以看到它对嵌入式浏览器和屏幕抓取器很有用。为了对不寻常的 HTML 客户端有用，需要将该属性设置为我链接的规范中的角色之一。如果你自己编造，这个“未来”功能就行不通了——评论会更好。

这里的实用性： http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/

网友回答：

此角色属性是否必要？

答：是的。

• 当语言未定义自己的角色属性时，角色属性对于支持可访问的富 Internet 应用程序 （WAI-ARIA） 在基于 XML 的语言中定义角色是必需的。
• 尽管这是协议和格式工作组发布角色属性的原因，但该属性也有更通用的用例。

它为您提供：

• 可及性
• 设备适配
• 服务器端处理
• 复杂数据描述,…等。