我一直在看某些人的工作中的角色属性。我也用它，但我不确定它的效果。
例如：
<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 吗？
可以在这里找到角色列表，但我看到有些人自己组成。是允许还是正确使用角色属性？
有什么想法吗？
答案
您看到的大多数角色都被定义为 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>
这在技术上是多余的，但可以帮助一些用户并且不会伤害任何用户。几年后，这种技术可能变得不必要了。
你还写道：
我看到有些人自己组成。是允许还是正确使用角色属性？
这是属性的有效使用，除非未包含真实角色。浏览器将在令牌列表中应用第一个已识别的角色。
<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
role 属性的目的是识别解析软件元素（及其子元素）作为 Web 应用程序一部分的确切功能。这主要是作为屏幕阅读器的可访问性事物，但我也可以看到它对嵌入式浏览器和屏幕抓取器很有用。为了对不寻常的 HTML 客户端有用，需要将属性设置为我链接的规范中的一个角色。如果你自己构成，那么这个 “未来” 功能就无法运作 – 评论会更好。
实用性： http ： //www.accessibleculture.org/articles/2011/04/html5-aria-2011/
这个角色属性是否必要？
答： 是的 。
-
当语言未定义自己的角色属性时，角色属性对于支持可访问富 Internet 应用程序（ WAI-ARIA ）以在基于 XML 的语言中定义角色是必需的。
-
虽然这是Protocols and Formats Working Group发布角色属性的原因，但该属性也有更多的一般用例。
它为您提供：
-
无障碍
-
设备适配
-
服务器端处理
-