我一直在一些人的工作中看到角色属性。我也用它,但我不确定它的效果。
例如:
<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 吗?
可以找到角色列表 here,但我看到有些人自己编造。这是否允许或正确使用角色属性?
对此有什么想法吗?
您看到的大多数角色都被定义为 ARIA 1.0 的一部分,然后通过支持规范(如 HTML-AAM)并入 HTML。一些新的 HTML5 元素(对话框、主等)甚至基于原来的 ARIA 角色。
http://www.w3.org/TR/wai-aria/
虽然 First Rule of 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 属性选择器来避免 class-itis 和 div-itis。
[role="button"] {
/* style these as buttons w/o relying on a .button class */
}
[7 年后更新:删除 * 选择器以使一些评论者高兴,因为在 2020 年不需要属性选择器上需要通用选择器的旧浏览器怪癖。]
原因 #2。备份原生元素的角色,以支持实现了 ARIA 角色但尚未实现原生元素角色的浏览器。
例如,浏览器多年来一直支持“主要”角色,但它是 HTML5 中相对较新的新增功能,因此许多浏览器尚不支持 <main>
的语义。
<main role="main">…</main>
这在技术上是多余的,但可以帮助一些用户并且不会伤害任何用户。几年后,这种技术可能对 main 来说变得不必要了。
原因#3。 7 年后(2020 年)更新:正如至少一位评论者指出的那样,这现在对自定义元素非常有用,并且正在进行一些规范工作以定义 Web 组件的默认可访问性角色。即使/一旦该 API 标准化,也可能需要覆盖组件的默认角色。
注意/回复
你还写道:
我看到有些人自己编的。这是否允许或正确使用角色属性?
除非不包括真正的角色,否则这是允许使用该属性的。浏览器将应用令牌列表中第一个识别的角色。
<span role="foo link note bar">...</a>
在列表之外,只有 link
和 note
是有效角色,因此链接角色将应用在平台可访问性 API 中,因为它位于首位。如果您使用自定义角色,请确保它们不会与 ARIA 中定义的任何角色或您使用的宿主语言(HTML、SVG、MathML 等)冲突
据我了解,角色最初是由 XHTML 定义的,但已被弃用。但是,它们现在由 HTML 5 定义,请参见此处:https://www.w3.org/WAI/PF/aria/roles#abstract_roles_header
角色属性的目的是向解析软件识别元素(及其子元素)作为 Web 应用程序的一部分的确切功能。这主要是作为屏幕阅读器的可访问性,但我也可以认为它对嵌入式浏览器和屏幕抓取器很有用。为了对不寻常的 HTML 客户端有用,该属性需要设置为我链接的规范中的角色之一。如果你自己编,这个“未来”的功能就不能工作——评论会更好。
这里的实用性:http://www.accessibleculture.org/articles/2011/04/html5-aria-2011/
这个角色属性是必要的吗?
回答:是的。
当语言没有定义自己的角色属性时,角色属性是支持可访问富 Internet 应用程序 (WAI-ARIA) 以基于 XML 的语言定义角色所必需的。
虽然这是角色属性由协议和格式工作组发布的原因,但该属性也有更一般的用例。
它为您提供:
可访问性
设备适配
服务器端处理
复杂的数据描述,...等。
我意识到这是一个老问题,但根据您的确切要求,另一个可能的考虑因素是在 https://validator.w3.org/ 上进行验证会生成如下警告:
警告:元素表单不需要表单角色。
角色属性主要提高使用屏幕阅读器的人的可访问性。对于几种情况,我们会使用它,例如可访问性、设备适配、服务器端处理和复杂数据描述。了解更多点击:https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute。
不定期副业成功案例分享
[role="button"]
查明任何元素将省去必须做a[role="button"], span[role="button"]
role
。