“角色”的目的是什么？属性在HTML中？ [英] What is the purpose of the "role" attribute in HTML?

问题描述

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

例如：

 < header id =headerrole =banner> 
头文件在这里
< / header> 
  

或者：

 < section id =facebookrole =contentinfo> 
 Facebook的东西在这里
< / section> 
  

或者：

 < section id =mainrole =main> 
主要内容在这里
< / section> 
  

是否需要此角色属性？

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

是否改进SEO？

可以找到角色列表< 这里，但我看到一些人自己编写。是否允许或正确使用角色属性？

对此的任何想法？

解决方案

你看到的大多数角色都是作为ARIA 1.0的一部分定义的，然后再被合并到HTML5中。一些新的HTML5元素（对话框，主要等）甚至基于原始的ARIA角色。

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

使用角色除了原生语义元素外，还有两个主要原因。
$ b

原因＃1。覆盖没有使用主语言元素的角色，或者由于各种原因，使用的语义不太合适的元素。

在这个例子中，使用了一个链接，即使结果功能比导航链接更像按钮。

 < a href =＃role =buttonaria-label =删除项目1>删除< / a> 
  

屏幕阅读器会听到这是一个按钮（而不是链接），您可以使用

  * [role =button] {
 / *风格这些按钮不依赖.button类* / 
} 
  

原因2。备份本地元素的角色，以支持实现ARIA角色但尚未实现本地元素角色的浏览器。

例如，多年来浏览器一直支持主要角色，但它是HTML5的一个相对新近的增加，所以许多浏览器尚不支持< main>语义的语义。 。

 < main role =main> ...< / main> 
  

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

您还写道：

我看到一些人自己做了。是否允许或正确使用角色属性？

除非不包含真实角色，否则这是该属性的有效用法。

 < span role =foo link note bar> ;.浏览器会将第一个认可的角色应用到令牌列表中。 ..< / A> 
  

不在列表中，只有 link 和 note 是有效的角色，因此首先应用链接角色。如果您使用自定义角色，请确保它们不与ARIA中定义的任何角色或您使用的主机语言（HTML，SVG，MathML等）冲突。

I keep seeing role attributes in some people's work. I use it too, but I'm not sure about its effect.

For example:

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

Is this role attribute necessary?

Is this attribute better for semantics?

Does it improve SEO?

A list of roles can be found here, but I see some people make up their own. Is that allowed or a correct use of the role attribute?

Any thoughts on this?

解决方案

Most of the roles you see were defined as part of ARIA 1.0, and then later incorporated into HTML5. Some of the new HTML5 elements (dialog, main, etc.) are even based on the original ARIA roles.

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

There are two primary reasons to use roles in addition to your native semantic element.

Reason #1. Overriding the role where no host language element is appropriate or, for various reasons, a less semantically appropriate element was used.

In this example, a link was used, even though the resulting functionality is more button-like than a navigation link.

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

Screen readers will hear this as a button (as opposed to a link), and you can use a CSS attribute selector to avoid class-itis and div-itis.

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

Reason #2. Backing up a native element's role, to support browsers that implemented the ARIA role but haven't yet implemented the native element's role.

For example, the "main" role has been supported in browsers for many years, but it's a relatively recent addition to HTML5, so many browsers don't yet support the semantic for <main>.

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

This is technically redundant, but helps some users and doesn't harm any. In a few years, this technique will likely become unnecessary.

You also wrote:

I see some people make up their own. Is that allowed or a correct use of the role attribute?

That's a valid use of the attribute unless a real role is not included. Browsers will apply the first recognized role in the token list.

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

Out of the list, only link and note are valid roles, and so the link role will be applied because it comes first. If you use custom roles, make sure they don't conflict with any defined role in ARIA or the host language you're using (HTML, SVG, MathML, etc.)

这篇关于“角色”的目的是什么？属性在HTML中？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！