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

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

例如:

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

角色列表可以在这里找到,但我看到一些人自己组成。 这是允许的还是角色属性的正确使用?

对此有何想法?


您看到的大多数角色都被定义为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角色但尚未实现本地元素角色的浏览器。

例如,浏览器支持多年的“主要”角色,但它是HTML5的一个相对较新的特性,因此许多浏览器尚不支持<main>的语义。

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

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

你还写道:

我看到一些人自己做了。 这是允许的还是角色属性的正确使用?

这是该属性的有效用法,除非不包含真正的角色。 浏览器将在令牌列表中应用第一个可识别的角色。

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

在列表之外,只有linknote才是有效的角色,因此首先应用链接角色。 如果您使用自定义角色,请确保它们不与ARIA中定义的任何角色或您使用的主机语言(HTML,SVG,MathML等)发生冲突。


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


这个角色属性是必需的吗?

答: 是的

  • 当语言没有定义自己的角色属性时,角色属性对于支持可访问富互联网应用程序( WAI-ARIA )来定义基于XML的语言中的角色是必需的。
  • 尽管这是角色属性由协议和格式工作组发布的原因,但该属性也具有更多的一般用例。
  • 它为您提供:

  • 无障碍
  • 设备适应
  • 服务器端处理
  • 复杂的数据描述,等等。
  • 链接地址: http://www.djcxy.com/p/939.html

    上一篇: What is the purpose of the "role" attribute in HTML?

    下一篇: How to create an HTML button that acts like a link?