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

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

例如:

<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> 

这个angular色属性是否必要?

这个属性对于语义更好吗?

它是否改善SEO?

angular色列表可以在这里find,但我看到一些人自己做。 是允许的还是angular色属性的正确使用?

对此有何想法?

你所看到的大多数angular色都被定义为ARIA 1.0的一部分,然后被合并到HTML5中。 一些新的HTML5元素(对话框,主要等等)甚至基于原始的ARIAangular色。

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

除了您的本地语义元素之外,还有两个主要原因使用angular色。

原因#1。 重写没有主语言元素是合适的angular色,或者由于各种原因,使用不太适合语义的元素。

在这个例子中,使用了一个链接,即使结果function比导航链接更像button。

 <a href="#" role="button" aria-label="Delete item 1">Delete</a> 

屏幕阅读器会听到这是一个button(而不是一个链接),你可以使用CSS属性select器来避免class-itis和div-itis。

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

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

例如,“主”angular色在浏览器中已经被支持了很多年,但它是HTML5的一个相对新近的增加,所以许多浏览器还不支持<main>的语义。

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

这在技术上是多余的,但是可以帮助一些用户并且不会造成任何损害。 几年后,这种技术可能会变得没有必要。

你还写道:

我看到一些人自己做了。 是允许的还是angular色属性的正确使用?

这是该属性的有效使用,除非不包含真实angular色。 浏览器将在令牌列表中应用第一个被识别的angular色。

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

从列表中,只有linknote是有效的angular色,所以链接angular色将被应用,因为它是第一个。 如果您使用自定义angular色,请确保它们不与ARIA中定义的任何angular色或您使用的主机语言(HTML,SVG,MathML等)发生冲突。

据我所知,angular色最初是由XHTML定义的,但不推荐使用。 但是,它们现在由HTML 5定义,请参阅: http : //www.w3.org/TR/wai-aria/complete#roles

angular色属性的目的是识别将软件元素(及其子元素)的确切functionparsing为networking应用程序的一部分。 这主要是屏幕阅读器的一种可访问性,但是我也可以把它看作是embedded式浏览器和屏幕刮取器的有用工具。 为了对非常规的HTML客户端有用,需要将属性设置为链接的规范中的一个angular色。 如果你自己构build,这个“未来”function就无法工作 – 评论会更好。

这里的实用性: http : //www.accessibleculture.org/articles/2011/04/html5-aria-2011/

这个angular色属性是否必要?

答: 是的

  • 当语言没有定义自己的angular色属性时,angular色属性对于支持可访问的富Internet应用程序( WAI-ARIA )来定义基于XML的语言中的angular色是必要的。
  • 尽pipe这是angular色属性由协议和格式工作组发布的原因,但该属性也具有更多的一般用例。

它为您提供:

  • 无障碍
  • 设备适应
  • 服务器端处理
  • 复杂的数据描述,等等。

用于锚点的引导button

 <a href="#" class="btn btn-info" role="button">Link Button</a> 

从这里: Bootstrapbutton