html - html 角色的属性的用途是什么?

  显示原文与译文双语对照的内容

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

f 。e 。:


<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元素( 对话框,main,等等 ) 甚至基于原始的ARIA角色。

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

除了本机语义元素之外,还有两个主要原因。

原因 #1. 重写该角色没有主机语言元素位置是否恰当,由于各种原因,一个 LESS 语义上适当的元素被使用。

在这个例子中,使用了一个链接,尽管结果的功能比导航链接更 button-like 。


<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. 备份自带的单元,以支持使用cookie的作用,可以实现ARIA角色但还没有实现本机角色的元素。

例如多年来浏览器支持"主要"角色,但它是一个相对于HTML5的最近添加,所以许多浏览器还不支持 <main>的语义。


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

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

你还编写了:

我看到有些人自己组成自己的。 是否允许或者正确使用角色属性?

除非不包括真正的角色,否则该属性无效。 浏览器将在标记列表中应用第一个识别的角色。


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

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

...