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

disho6za 于 2022-12-09 发布在其他

关注(0)|答案(6)|浏览(248)

我一直在一些人的作品中看到角色属性，我也用过，但不确定效果如何。
例如：

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

是否需要此角色属性？
此属性是否更适合语义？
它能提高搜索引擎优化吗？
可以在here中找到角色列表，但我看到有些人自己创建了角色。这是允许的还是正确使用角色属性的？
有什么想法吗？

Html

来源：https://stackoverflow.com/questions/10403138/what-is-the-purpose-of-the-role-attribute-in-html

6条答案

按热度按时间

k2fxgqgv1#

您看到的大多数角色都是作为ARIA 1.0的一部分定义的，然后通过支持规范（如HTML-AAM）合并到HTML中。一些新的HTML5元素（dialog、main等）甚至基于原始ARIA角色。
http://www.w3.org/TR/wai-aria/
而咏叹调的第一条规则说：
如果您可以使用原生HTML元素[HTML51]或属性，并将所需的语义和行为内置在其中，而不是重新调整元素的用途并添加ARIA角色、状态或属性以使其可访问，那么请这样做。
除了本地语义元素之外还有几个主要原因需要使用角色。

**原因#1.**在没有合适的宿主语言元素或由于各种原因使用了语义上不太合适的元素的情况下覆盖角色。

在本例中，使用了一个链接，尽管结果功能比导航链接更像按钮。

<a href="#" role="button" aria-label="Delete item 1">Delete</a>
<!-- Note: href="#" is just a shorthand here, not a recommended technique. Use progressive enhancement when possible. -->

屏幕阅读器用户将听到这是一个按钮（而不是链接），您可以使用CSS属性选择器来避免类炎和类炎。

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

[7年后更新：删除了 * 选择器，以使一些评论者感到高兴，因为在2020年不需要属性选择器上需要通用选择器的旧浏览器怪癖。]

**原因#2.**备份原生元素的角色，以支持实现了ARIA角色但尚未实现原生元素角色的浏览器。

例如，浏览器支持“main”角色已经很多年了，但它是HTML5中相对较新的添加，因此许多浏览器还不支持<main>的语义。

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

这在技术上是多余的，但对一些用户有帮助，不会伤害任何人。在几年内，这项技术可能会成为不必要的主要。

**原因#3.**7年后更新（2020年）：正如至少有一位评论者指出的，这对于自定义元素非常有用，一些规范工作正在进行中，以定义Web组件的默认可访问性角色。即使/一旦API标准化，可能需要覆盖组件的默认角色。
附注/回覆

您还写道：
我看到有些人自己编的。这是允许的还是正确使用角色属性的？
这是一个允许使用的属性，除非一个真实的的角色没有被包括在内。浏览器将应用令牌列表中第一个被识别的角色。

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

在列表中，只有link和note是有效的角色，因此链接角色将应用于平台可访问性API中，因为它位于第一位。如果您使用自定义角色，请确保它们不会与ARIA中定义的角色或您使用的主机语言（HTML，SVG，MathML等）冲突。

赞(0）回复(0）举报 2022-12-09

6jygbczu2#

据我所知，角色最初是由XHTML定义的，但后来被弃用了。然而，现在它们是由HTML5定义的，请看这里：https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header
role属性的目的是向解析软件标识元素的确切功能（及其子项）作为Web应用程序的一部分。这主要是作为屏幕阅读器的辅助功能，但我也可以看到它对嵌入式浏览器和屏幕抓取器很有用。为了对不常见的HTML客户端有用，该属性需要被设置为我链接的规范中的一个角色。如果你自己创建，这个“未来”功能就不能工作了--注解会更好。
实用性：http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/

赞(0）回复(0）举报 2022-12-09

kmbjn2e33#

是否需要此角色属性？
回答：是的。