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的一部分，然后被合并到HTML5中。一些新的HTML5元素（对话框，主要等）甚至基于原始的ARIA角色。

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

除了原生语义元素外，还有两个主要原因可以使用角色。

原因＃1。覆盖没有适当主机语言元素的角色，或者由于各种原因，使用了语义较少的元素。

在此示例中，使用了一个链接，即使生成的功能比导航链接更像按钮。

<a href="#" role="button" aria-label="Delete item 1">Delete</a>

屏幕阅读器会将此视为按钮（而不是链接），您可以使用CSS属性选择器来避免class-itis和div-itis。

*[role="button"] {
  /* style these a buttons w/o relying on a .button class */
}

原因＃2。备份本机元素的角色，以支持实现ARIA角色但尚未实现本机元素角色的浏览器。

例如，多年来浏览器一直支持“main”角色，但它是HTML5的一个相对较新的版本，因此很多浏览器还不支持<main>的语义。

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

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

您还写道：

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

除非不包含真实角色，否则这是对属性的有效使用。浏览器将在令牌列表中应用第一个已识别的角色。

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

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

Answer 2

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

Answer 3

这个角色属性是否必要？

答案：是。

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

它为您提供：

辅助功能
设备改编
服务器端处理
复杂的数据描述，......等。

Answer 4

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

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

Answer 5

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

HTML中“role”属性的目的是什么？

5 个答案: