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

Question

我一直在一些人的工作中看到角色属性。我也用过，但不知道效果如何。

例如：

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

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

对此有什么想法吗？

Answer 1

您看到的大多数角色都被定义为 ARIA 1.0 的一部分，然后通过支持规范（如 HTML-AAM）并入 HTML。一些新的 HTML5 元素（对话框、主等）甚至基于原来的 ARIA 角色。

http://www.w3.org/TR/wai-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 角色但尚未实现原生元素角色的浏览器。

例如，“主要”角色在浏览器中已支持多年，但它是 HTML5 中相对较新的补充，因此许多浏览器尚不支持 <main> 的语义。

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

这在技术上是多余的，但可以帮助一些用户并且不会伤害任何用户。几年后，这种技术可能会变得不再需要 main。

原因 #3。 7 年后（2020 年）更新：正如至少一位评论者指出的那样，这现在对自定义元素非常有用，并且正在进行一些规范工作以定义 Web 组件的默认可访问性角色。即使/一旦该 API 标准化，也可能需要覆盖组件的默认角色。

备注/回复

你还写道：

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

除非不包括真正的角色，否则这是允许使用该属性的。浏览器将应用令牌列表中第一个识别的角色。

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

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

Answer 2

据我了解，角色最初由 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/

Answer 3

这个角色属性有必要吗？

回答：是的。

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

它为您提供：

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

Answer 4

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

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

Answer 5

角色属性主要改善使用屏幕阅读器的人的可访问性。 对于几种情况，我们会使用它，例如可访问性、设备适配、服务器端处理和复杂数据描述。 了解更多点击：https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute。