我不断在一些人的工作中看到角色属性。我也用它,但我不确定它的效果。
例如:
<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?
这里可以找到角色列表,但我看到有些人自己编的。这是允许的,还是正确地使用角色属性?
对此有什么想法吗?
您看到的大多数角色都是作为ARIA1.0的一部分定义的,然后通过HTML-AAM等支持规范合并到HTML中。一些新的HTML5元素(dialog,main等)甚至是基于原来的ARIA角色的。
http://www.w3.org/tr/wai-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属性选择器来避免class-itis和div-itis。
[role="button"] {
/* style these as buttons w/o relying on a .button class */
}
[7年后的更新:删除了*选择符,以使一些评论人高兴,因为在2020年,需要在属性选择符上使用通用选择符的老浏览器怪癖已经没有必要了。]
原因二。备份本机元素的角色,以支持已实现ARIA角色但尚未实现本机元素角色的浏览器。
例如,“main”角色在浏览器中已经被支持了很多年,但它是HTML5中最近才增加的,因此许多浏览器还不支持的语义。
<main role="main">…</main>
这在技术上是多余的,但对一些用户有帮助,对任何用户都没有伤害。几年后,Main很可能不再需要这种技术。
原因#3.7年后(2020年)的更新:正如至少一位评论者指出的那样,这现在对于自定义元素非常有用,一些spec工作正在进行,以定义一个web组件的默认可访问性角色。即使API标准化了,也可能需要覆盖组件的默认角色。
注释/答复
你还写道:
我看到有些人自己编的。这是允许的,还是正确地使用角色属性?
这是允许使用属性的,除非没有包含真正的角色。浏览器将应用令牌列表中第一个被识别的角色。
<span role="foo link note bar">...</a>
在列表中,只有link
和note
是有效角色,因此link角色将应用于平台可访问性API,因为它排在第一位。如果您使用自定义角色,请确保它们不会与ARIA或您正在使用的宿主语言(HTML,SVG,MathML等)中定义的任何角色冲突
据我所知,角色最初是由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/
这个角色属性是必须的吗?
答:是的。
它为您提供: