我一直在一些人的作品中看到角色属性。我也使用它,但我不确定它的效果。
比如说。
<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角色但尚未实现本地元素角色的浏览器。
例如,浏览器支持"main"角色已经很多年了,但它是HTML5的一个相对较新的补充,所以许多浏览器还不支持<main>
的语义。
<main role="main">…</main>
这在技术上是多余的,但可以帮助一些用户,而不会损害任何用户。几年后,这种技术可能会变得没有必要。
你还写道。
我看到有些人自己编造。这是否被允许或者是对角色属性的正确使用?
这是对属性的有效使用,除非不包括真正的角色。浏览器会应用令牌列表中第一个被认可的角色。
<span role="foo link note bar">...</a>
在这个列表中,只有link
和note
是有效的角色,所以link角色将被应用,因为它排在第一位。如果你使用自定义角色,请确保它们不与ARIA或你使用的主机语言(HTML、SVG、MathML等)中定义的任何角色冲突。
据我所知,角色最初是由XHTML定义的,但后来被废弃了。然而,它们现在被HTML 5定义了,见这里:https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header
角色属性的目的是向解析软件确定一个元素(及其子元素)在网络应用中的确切功能。这主要是作为屏幕阅读器的可访问性,但我也可以看到它对嵌入式浏览器和屏幕刮擦器是有用的。为了对不寻常的HTML客户端有用,该属性需要被设置为我链接的规范中的一个角色。如果你自己编造,这个'未来'功能就不能发挥作用--注释会更好。
这里的实际情况是:http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/
这个角色属性是否必要?
答案:是的。是的。
它为你提供。
角色属性主要是为使用屏幕阅读器的人提高无障碍性。 角色属性主要是为了提高使用屏幕阅读器的人的无障碍性,在一些情况下,我们使用了它,如无障碍性,设备适应性,服务器端处理,以及复杂的数据描述。 了解更多请点击。 https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute.
1:
[2]: https://www.webguru-india.com/website-development-company [3]: https://www.webguru-india.com