超文本标记语言中“角色”属性的目的是什么？

我一直在一些人的作品中看到角色属性。我也使用它，但我不确定它的效果。

例如：

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

可以找到角色列表这里，但我看到有些人自己制作。这是允许的还是正确使用角色属性？

对此有什么想法吗？

724697 次浏览
小开

据我所知，角色最初由XHTML定义，但已被弃用。然而，它们现在由超文本标记语言5定义，请参阅此处：https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header

角色属性的目的是向解析软件识别作为Web应用程序一部分的元素（及其子元素）的确切功能。这主要是作为屏幕阅读器的可访问性，但我也可以认为它对嵌入式浏览器和屏幕抓取器很有用。为了对不寻常的超文本标记语言客户端有用，该属性需要设置为我链接的规范中的角色之一。如果你自己制作，这种“未来”功能无法工作-注释会更好。

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

小开
最佳答案

您看到的大多数角色都是ARIA 1.0的一部分，然后通过支持超文本标记语言-AAM等规范合并到超文本标记语言中。一些新的HTML5元素（对话框、主等）甚至基于原始ARIA角色。

http://www.w3.org/TR/wai-aria/

阿里亚第一法则表示：

如果您可以使用本机超文本标记语言元素[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>

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

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

备注/回复

你还写道：

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

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

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

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

小开

这个角色属性是必要的吗？

答案：有

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

它为您提供：

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

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

警告：表单角色对于元素表单是不必要的。

小开

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


提交答案