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

What is the purpose of the “role” attribute in HTML?

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

例如：

1
2
3

<header id="header" role="banner">
Header stuff in here
</header>

或：

1
2
3

<section id="facebook" role="contentinfo">
Facebook stuff in here
</section>

或：

1
2
3

<section id="main" role="main">
Main content stuff in here
</section>

是否需要此角色属性？

这个属性更适合语义吗？

它能提高搜索引擎优化吗？

在这里可以找到一个角色列表，但是我看到一些人组成了他们自己的角色。是否允许或正确使用角色属性？

有什么想法吗？

您看到的大多数角色都被定义为ARIA1.0的一部分，然后被合并到HTML5中。一些新的HTML5元素(dialog、main等)甚至基于原始的aria角色。

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

除了本地语义元素之外，使用角色还有两个主要原因。

原因1。重写没有合适的宿主语言元素的角色，或者由于各种原因，使用的元素在语义上不太合适。

在这个例子中，使用了一个链接，即使结果的功能比导航链接更像按钮。

Delete

屏幕阅读器会听到这是一个按钮(而不是链接)，您可以使用CSS属性选择器来避免类ITIS和DIVITS。

1
2
3

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

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

例如，"主要"角色在浏览器中已经被支持了很多年，但是它是HTML5的一个最近的添加，所以许多浏览器还不支持

的语义。

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

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

你还写道：

I see some people make up their own. Is that allowed or a correct use of the role attribute?

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

1	<span role="foo link note bar">...

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