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

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

例如:

<header id=“header”role=“banner”>
这里有头条
&lt/标题>

或:

<section id=“facebook”role=“contentinfo”>
这里有Facebook的东西
&lt/第节>

或:

<section id=“main”role=“main”>
这里的主要内容
&lt/第节>

是否需要此角色属性

这个属性更适合语义吗

它能提高搜索引擎优化吗

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

有什么想法吗

您看到的大多数角色都被定义为ARIA 1.0的一部分,然后通过支持HTML-AAM等规范被合并到HTML中。一些新的HTML5元素(dialog、main等)甚至基于原始的ARIA角色

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

除了本机语义元素之外,使用角色还有几个主要原因

原因#1。覆盖没有合适的宿主语言元素的角色,或者由于各种原因,使用了语义不太合适的元素

在本例中,使用了链接,尽管生成的功能比导航链接更像按钮

<a href=&quot#&引用;角色="按钮“;aria标签=“aria标签”;删除第1项“&燃气轮机;删除&lt/a>
<!--注:href=&quot#&引用;这只是一种速记,不是推荐的技巧。尽可能使用渐进式增强--&燃气轮机;

屏幕阅读器用户将听到这是一个按钮(与链接相反),您可以使用CSS属性选择器来避免类itis和div itis

[role="button"]{
/*将这些样式设置为不依赖.button类的按钮*/
}

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

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

例如;“主要”;浏览器已经支持角色很多年了,但它是HTML5的一个相对较新的补充,因此许多浏览器还不支持的语义<main&gt

<主要角色="“主要”&gt&lt/main>

这在技术上是多余的,但对一些用户有帮助,不会伤害任何用户。再过几年,这项技术可能就不再适用于main

原因#3.
7年后(2020年)更新:正如至少一位评论者指出的那样,这对自定义元素非常有用,一些规范工作正在进行中,以定义web组件的默认可访问性角色。即使API标准化/一旦标准化,也可能需要覆盖组件的默认角色

注意/回复

你还写道:

我看到有些人自己编的。这是允许的还是正确使用角色属性

这是允许使用的属性,除非未包含真实角色。浏览器将应用令牌列表中第一个识别的角色

<span role="foo链接注释栏“&gt&lt/a>

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

发表评论