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

What is the purpose of the "role" attribute in HTML?

提问by jeroen

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?

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

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?

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

Any thoughts on this?

对此有何想法？

采纳答案by James Craig

Most of the roles you see were defined as part of ARIA 1.0, and then later incorporated into HTML5. Some of the new HTML5 elements (dialog, main, etc.) are even based on the original ARIA roles.

您看到的大多数角色都被定义为 ARIA 1.0 的一部分，然后被合并到 HTML5 中。一些新的 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.Overriding the role where no host language element is appropriate or, for various reasons, a less semantically appropriate element was used.

原因#1。在没有合适的宿主语言元素或由于各种原因使用语义不太合适的元素时覆盖角色。

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

原因#2。备份原生元素的角色，以支持实现了 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>.

例如，“主要”角色在浏览器中已经支持多年，但它是 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?

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

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 linkand noteare valid roles, and so the link role will be applied because it comes first. 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.)

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

回答by S Hubble

As I understand it, roles were initially defined by XHTML but were deprecated. However, they are now defined by HTML 5, see here: https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header

据我了解，角色最初是由 XHTML 定义的，但已被弃用。但是，它们现在由 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. 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. If you make up your own, this 'future' functionality can't work - a comment would be better.

role 属性的目的是为解析软件识别作为 Web 应用程序一部分的元素（及其子元素）的确切功能。这主要是作为屏幕阅读器的辅助功能，但我也认为它对嵌入式浏览器和屏幕抓取工具很有用。为了对不寻常的 HTML 客户端有用，需要将该属性设置为我链接的规范中的角色之一。如果您自己编写，则此“未来”功能将无法使用 - 评论会更好。

Practicalities here: http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/

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

回答by Laxmi

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

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

It provides you:

它为您提供：

• Accessibility
• Device adaptation
• Server-side processing
• Complex data description,...etc.

• 无障碍
• 设备适配
• 服务器端处理
• 复杂的数据描述等。

回答by dotnetnutty

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.

警告：元素表单不需要表单角色。

回答by WebguruInfosystems

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。