HTML 中 “角色” 属性的目的是什么？

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

例如：

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

此角色属性是否必要？

这个属性对语义更好吗？

它会提高 SEO 吗？

可以在此处找到角色列表，但我看到有人组成了自己的角色。是否允许或正确使用 role 属性？

有什么想法吗？

html

您看到的大多数角色都定义为 ARIA 1.0 的一部分，然后又合并到 HTML5 中。一些新的 HTML5 元素（对话框，主要元素等）甚至基于原始的 ARIA 角色。

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

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

原因＃1。在没有合适的宿主语言元素或出于各种原因而使用语义上不太合适的元素的情况下覆盖角色。

在此示例中，使用了链接，即使所得到的功能比导航链接更像按钮。

<a href="#" role="button" aria-label="Delete item 1">Delete</a>

屏幕阅读器会将其作为按钮（而不是链接）来听，并且您可以使用 CSS 属性选择器来避免 class-itis 和 div-itis。

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

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

例如，多年以来，浏览器都一直支持 “main” 角色，但这是 HTML5 的相对较新的功能，因此许多浏览器尚不支持<main>的语义。

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

从技术上讲，这是多余的，但对某些用户有帮助，并且不会损害任何用户。几年后，此技术可能会变得不必要。

您还写道：

我看到有人组成了自己的。是否允许或正确使用 role 属性？

除非不包括实际角色，否则这是对属性的有效使用。浏览器将在令牌列表中应用第一个公认的角色。

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

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

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

角色属性的目的是确定要解析的软件作为 Web 应用程序一部分的元素（及其子元素）的确切功能。这主要是作为屏幕阅读器的可访问性，但是我也可以看到它对于嵌入式浏览器和屏幕抓取器很有用。为了对异常的 HTML 客户端有用，需要将该属性设置为我链接的规范中的角色之一。如果您自己制作，此 “未来” 功能将无法正常工作 - 注释会更好。

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

此角色属性是否必要？

答：是的。

当语言不定义自己的角色属性时，角色属性对于支持可访问的富 Internet 应用程序（ WAI-ARIA ）定义基于 XML 的语言中的角色是必需的。
尽管这是 role 属性由Protocols and Formats Working Group发布的原因，但该属性也具有更通用的用例。

它为您提供：

辅助功能
设备适配
服务器端处理
复杂的数据描述等

我意识到这是一个老问题，但是根据您的确切要求，另一个可能的考虑因素是在https://validator.w3.org/上进行验证会生成如下警告：

警告：表单角色对于元素表单是不必要的。

角色属性主要提高使用屏幕阅读器的人员的可访问性。在某些情况下，我们使用它，例如可访问性，设备适配，服务器端处理以及复杂的数据描述。要了解更多信息，请点击： https : //www.w3.org/WAI/PF/HTML/wiki/RoleAttribute 。

答案