我经常在一些人的工作中看到角色属性。我也用它，但我不确定它的效果。
例如:
<header id="header" role="banner">
Header stuff in here
</header>
Or:
<section id="facebook" role="contentinfo">
Facebook stuff in here
</section>
Or:
<section id="main" role="main">
Main content stuff in here
</section>
这个角色属性是必要的吗?
这个属性在语义上更好吗?
它能改善搜索引擎优化吗?
在这里可以找到一个角色列表，但我看到一些人自己制定了自己的角色。这样使用role属性是允许的还是正确的?
对此有什么想法吗?
据我所知，角色最初是由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/
您所看到的大多数角色都是作为ARIA 1.0的一部分定义的，然后通过支持HTML- aam等规范将其合并到HTML中。一些新的HTML5元素(dialog, 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-itis和div-itis。
[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是标准化的，也可能需要重写组件的默认角色。
注意/答复
你还写道:
我看到有些人自己编。这样使用role属性是允许的还是正确的?
这是允许使用该属性的，除非不包括真正的角色。浏览器将应用令牌列表中第一个被识别的角色。
<span role="foo link note bar">...</a>
在列表中，只有link和note是有效的角色，因此link角色将应用于平台可访问性API，因为它排在前面。如果使用自定义角色，请确保它们不会与ARIA或所使用的主机语言(HTML、SVG、MathML等)中任何已定义的角色冲突。
这个角色属性是必要的吗?
答:是的。
当语言没有定义自己的角色属性时，role属性对于支持可访问富Internet应用程序(WAI-ARIA)以基于xml的语言定义角色是必要的。 尽管这是协议和格式工作组发布角色属性的原因，但该属性还有更通用的用例。
它为您提供:
可访问性 设备适应 服务器端处理 复杂的数据描述，等等。
我知道这是一个老问题，但根据您的确切需求，另一个可能的考虑因素是，在https://validator.w3.org/上验证会产生如下警告:
警告:表单角色对于元素表单来说是不必要的。
角色属性主要提高人们使用屏幕阅读器的可访问性。 在一些情况下，我们使用它，如可访问性、设备适配、服务器端处理和复杂的数据描述。 了解更多请点击:https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute。
“角色属性”是为了帮助有视力问题的人而开发的。屏幕阅读器通知用户有关元素的信息。虽然这看起来很简单，但事实并非如此。如果你不是专家，也不确定，就不要分配角色。你可以在这里读
理解有时候糟糕的ARIA实现是很重要的 造成的问题比它能解决的要多，让内容变少 可访问。这可能发生，因为缺乏知识如何和 何时使用ARIA。
一些HTML元素具有隐式的角色。例如:
h1,h2...h6 -> heading
ul,li -> list
button -> button
a -> link
<input type="text"/> -> text
为了更具描述性，您可以重写这些内容
在SEO的情况下，你可以阅读的可访问性和SEO神话/
谷歌搜索“搜索引擎排名因素”会显示一个数字 搜索引擎优化/ SEM行业领导者的结果概述 改善SEO的许多因素。绝大多数已被确认 排名因素与易用性没有任何关系。 事实上，很多谷歌排名的因素并没有多少意义 与可达性的关系。
你也可以阅读:SEO重叠
虽然重要的是要了解SEO和可访问性(a11y) 为了对两者进行正确优化，重叠也是很重要的 要注意，为一个人优化并不一定类似于优化 另一个。换句话说，如果你为搜索优化了一个页面 引擎，这并不意味着你必须让它易于访问-和 亦然。
