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

例如:

<header id="header" role="banner">
    Header stuff in here
</header>

Or:

<section id="facebook" role="contentinfo">
    Facebook stuff in here
</section>

Or:

<section id="main" role="main">
     Main content stuff in here
</section>

这个角色属性是必要的吗?

这个属性在语义上更好吗?

它能改善搜索引擎优化吗?

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

对此有什么想法吗?


当前回答

角色和其他属性提高了屏幕阅读器的可访问性。它可以间接地帮助搜索蜘蛛更好地识别和理解各个部分。如果我比较这个和微数据模式,它在一个小的方式提高SEO。

其他回答

角色和其他属性提高了屏幕阅读器的可访问性。它可以间接地帮助搜索蜘蛛更好地识别和理解各个部分。如果我比较这个和微数据模式,它在一个小的方式提高SEO。

角色属性主要提高人们使用屏幕阅读器的可访问性。 在一些情况下,我们使用它,如可访问性、设备适配、服务器端处理和复杂的数据描述。 了解更多请点击:https://www.w3.org/WAI/PF/HTML/wiki/RoleAttribute。

我知道这是一个老问题,但根据您的确切需求,另一个可能的考虑因素是,在https://validator.w3.org/上验证会产生如下警告:

警告:表单角色对于元素表单来说是不必要的。

这个角色属性是必要的吗?

答:是的。

当语言没有定义自己的角色属性时,role属性对于支持可访问富Internet应用程序(WAI-ARIA)以基于xml的语言定义角色是必要的。 尽管这是协议和格式工作组发布角色属性的原因,但该属性还有更通用的用例。

它为您提供:

可访问性 设备适应 服务器端处理 复杂的数据描述,等等。

您所看到的大多数角色都是作为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属性选择器来避免class-itis和div-itis。

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

[7年后更新:删除*选择器以取悦一些评论,因为在属性选择器上需要通用选择器的旧浏览器癖好在2020年是不必要的。]

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

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

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

这在技术上是多余的,但可以帮助一些用户,而不会伤害任何用户。几年后,这种技术可能对main来说就不再必要了。

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

注意/答复

你还写道:

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

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

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

在列表中,只有link和note是有效的角色,因此link角色将应用于平台可访问性API,因为它排在前面。如果使用自定义角色,请确保它们不会与ARIA或所使用的主机语言(HTML、SVG、MathML等)中任何已定义的角色冲突。