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


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

例如:

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

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

有什么想法吗?


917
2018-05-01 10:11


起源




答案:


您看到的大多数角色都被定义为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>

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


818
2017-09-06 18:12



此链接也可能有所帮助。在HTML中使用ARIA。 rawgithub.com/w3c/aria-in-html/master/index.html - James Craig
你为什么把通用选择器放在[role =“button”]前面? - Evgeny
@EugeneXa我的猜测是用它精确定位任何元素 [role="button"] 将节省必须做的事 a[role="button"], span[role="button"] - ngplayground
“几年后,这种技术很可能变得不必要”。 Idk任何关于可访问性的东西,但有角度和Web组件创建自定义标签之类的东西,我可以想象这变得更加必要。 - xdhmoore
@xdhmoore我认为他特别指的是将角色设置为与标签相同的值的冗余技术,而不是使用 role 一般来说。 - willlma


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


140
2018-05-01 13:10





这个角色属性是否必要?

回答:

  • role属性是支持Accessible Rich Internet Applications所必需的 WAI-ARIA 当语言没有定义自己的角色属性时,在基于XML的语言中定义角色。
  • 虽然这是角色属性发布的原因 协议和格式工作组,该属性也有更多的一般用例。

它为您提供:

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

9
2017-10-13 07:36



@Andrew可访问性在开发移动应用程序时无关紧要?你是认真的吗? - cuddlecheek