本文翻译自：What is the purpose of the “role” attribute in HTML?
I keep seeing role attributes in some people's work. 我一直在某些人的工作中看到角色属性。 I use it too, but I'm not sure about its effect. 我也使用它，但是我不确定它的效果。
For example: 例如：
<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>
Is this role attribute necessary? 此角色属性是否必要？
Is this attribute better for semantics? 这个属性对语义更好吗？
Does it improve SEO? 它会提高SEO吗？
A list of roles can be found here , but I see some people make up their own. 可以在此处找到角色列表，但我看到有人组成了自己的角色。 Is that allowed or a correct use of the role attribute? 是否允许或正确使用role属性？
Any thoughts on this? 有什么想法吗？
#1楼
参考：https://stackoom.com/question/heKY/HTML中-角色-属性的目的是什么
#2楼
As I understand it, roles were initially defined by XHTML but were deprecated. 据我了解，角色最初是由XHTML定义的，但已被弃用。 However, they are now defined by HTML 5, see here: https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header 但是，它们现在由HTML 5定义，请参见此处： https : //www.w3.org/WAI/PF/aria/roles#abstract_roles_header
The purpose of the role attribute is to identify to parsing software the exact function of an element (and its children) as part of a web application. 角色属性的目的是确定要解析的软件作为Web应用程序一部分的元素（及其子元素）的确切功能。 This is mostly as an accessibility thing for screen readers, but I can also see it as being useful for embedded browsers and screen scrapers. 这主要是作为屏幕阅读器的可访问性，但是我也可以看到它对于嵌入式浏览器和屏幕抓取器很有用。 In order to be useful to the unusual HTML client, the attribute needs to be set to one of the roles from the spec I linked. 为了对异常的HTML客户端有用，需要将该属性设置为我链接的规范中的角色之一。 If you make up your own, this 'future' functionality can't work - a comment would be better. 如果您自己制作，此“未来”功能将无法正常工作-注释会更好。
Practicalities here: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/ 这里的实用性： http : //www.accessibleculture.org/articles/2011/04/html5-aria-2011/
#3楼
Most of the roles you see were defined as part of ARIA 1.0, and then later incorporated into HTML5. 您看到的大多数角色都定义为ARIA 1.0的一部分，然后又合并到HTML5中。 Some of the new HTML5 elements (dialog, main, etc.) are even based on the original ARIA roles. 一些新的HTML5元素（对话框，主要元素等）甚至基于原始的ARIA角色。
http://www.w3.org/TR/wai-aria/ http://www.w3.org/TR/wai-aria/
There are two primary reasons to use roles in addition to your native semantic element. 除了您的本机语义元素之外，还有两个主要原因要使用角色。
Reason #1. 原因＃1。 Overriding the role where no host language element is appropriate or, for various reasons, a less semantically appropriate element was used. 在没有合适的宿主语言元素或出于各种原因而使用语义上不太合适的元素的情况下覆盖角色。
In this example, a link was used, even though the resulting functionality is more button-like than a navigation link. 在此示例中，使用了链接，即使所得到的功能比导航链接更像按钮。
<a href="#" role="button" aria-label="Delete item 1">Delete</a>
Screen readers will hear this as a button (as opposed to a link), and you can use a CSS attribute selector to avoid class-itis and div-itis. 屏幕阅读器会将其作为按钮（而不是链接）来听，并且您可以使用CSS属性选择器来避免class-itis和div-itis。
*[role="button"] {
/* style these a buttons w/o relying on a .button class */
}
Reason #2. 原因2。 Backing up a native element's role, to support browsers that implemented the ARIA role but haven't yet implemented the native element's role. 备份本机元素的角色，以支持实现了ARIA角色但尚未实现本机元素的角色的浏览器。
For example, the "main" role has been supported in browsers for many years, but it's a relatively recent addition to HTML5, so many browsers don't yet support the semantic for <main> . 例如，多年以来，浏览器都一直支持“ main”角色，但这是HTML5的相对较新的功能，因此许多浏览器尚不支持<main>的语义。
<main role="main">…</main>
This is technically redundant, but helps some users and doesn't harm any. 从技术上讲，这是多余的，但对某些用户有帮助，并且不会损害任何用户。 In a few years, this technique will likely become unnecessary. 几年后，此技术可能会变得不必要。
You also wrote: 您还写道：
I see some people make up their own. 我看到有人组成了自己的。 Is that allowed or a correct use of the role attribute? 是否允许或正确使用role属性？
That's a valid use of the attribute unless a real role is not included. 除非不包括实际角色，否则这是对属性的有效使用。 Browsers will apply the first recognized role in the token list. 浏览器将在令牌列表中应用第一个公认的角色。
<span role="foo link note bar">...</a>
Out of the list, only link and note are valid roles, and so the link role will be applied because it comes first. 在列表之外，只有link和note是有效角色，因此将应用链接角色，因为它首先出现。 If you use custom roles, make sure they don't conflict with any defined role in ARIA or the host language you're using (HTML, SVG, MathML, etc.) 如果您使用自定义角色，请确保它们与ARIA或您使用的宿主语言（HTML，SVG，MathML等）中任何已定义的角色都没有冲突。
#4楼
Is this role attribute necessary? 此角色属性是否必要？
Answer: Yes . 答： 是的 。
- The role attribute is necessary to support Accessible Rich Internet Applications ( WAI-ARIA ) to define roles in XML-based languages, when the languages do not define their own role attribute. 当语言不定义自己的角色属性时，角色属性对于支持可访问的富Internet应用程序（ WAI-ARIA ）定义基于XML的语言中的角色是必需的。
- Although this is the reason the role attribute is published by the Protocols and Formats Working Group , the attribute has more general use cases as well. 尽管这是role属性由Protocols and Formats Working Group发布的原因，但该属性也具有更通用的用例。
It provides you: 它为您提供：
- Accessibility 辅助功能
- Device adaptation 设备适配
- Server-side processing 服务器端处理
- Complex data description,...etc. 复杂的数据描述等
#5楼
I realise this is an old question, but another possible consideration depending on your exact requirements is that validating on https://validator.w3.org/ generates warnings as follows: 我意识到这是一个老问题，但是根据您的确切要求，另一个可能的考虑因素是在https://validator.w3.org/上进行验证会生成如下警告：
Warning: The form role is unnecessary for element form. 警告：表单角色对于元素表单是不必要的。
#6楼
Role attribute mainly improve accessibility for people using screen readers. 角色属性主要提高使用屏幕阅读器的人员的可访问性。 For several cases we use it such as accessibility, device adaptation,server-side processing, and complex data description. 在某些情况下，我们使用它，例如可访问性，设备适配，服务器端处理以及复杂的数据描述。 Know more click: https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute . 要了解更多信息，请点击： https : //www.w3.org/WAI/PF/HTML/wiki/RoleAttribute 。
11万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
