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

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

有什么想法吗？

Answer 1

您看到的大多数角色都定义为ARIA 1.0的一部分，然后又合并到HTML5中。一些新的HTML5元素（对话框，主要元素等）甚至基于原始的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角色但尚未实现本机元素的角色的浏览器。

例如，多年来，浏览器一直支持“主要”角色，但这是HTML5的相对较新的功能，因此许多浏览器尚不支持的语义<main>。

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

从技术上讲，这是多余的，但对某些用户有帮助，并且不会损害任何用户。几年后，这种技术可能会变得不必要。

您还写道：

我看到有人组成了自己的。是否允许或正确使用role属性？

除非不包括实际角色，否则这是对属性的有效使用。浏览器将在令牌列表中应用第一个公认的角色。

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

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