“角色"的目的是什么?HTML 中的属性? [英] What is the purpose of the "role" attribute in HTML?
问题描述
我一直在一些人的工作中看到角色属性.我也用过，但不知道效果如何.
I keep seeing role attributes in some people's work. I use it too, but I'm not sure about its effect.
例如:
<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>
<小时>
这个角色属性有必要吗?
Is this role attribute necessary?
这个属性对语义更好吗?
Is this attribute better for semantics?
它会改善 SEO 吗?
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?
对此有什么想法吗?
推荐答案
您看到的大多数角色都被定义为 ARIA 1.0 的一部分，然后通过支持规范(如 HTML-AAM)并入 HTML.一些新的 HTML5 元素(对话框、主元素等)甚至基于原始的 ARIA 角色.
Most of the roles you see were defined as part of ARIA 1.0, and then later incorporated into HTML via supporting specs like HTML-AAM. 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 a few primary reasons to use roles in addition to your native semantic element.
原因 #1. 在没有合适的宿主语言元素或由于各种原因使用语义不太合适的元素时覆盖角色.
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>
<!-- Note: href="#" is just a shorthand here, not a recommended technique. Use progressive enhancement when possible. -->
屏幕阅读器用户会听到这是一个按钮(而不是链接)，您可以使用 CSS 属性选择器来避免 class-itis 和 div-itis.
Screen readers users 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 as buttons w/o relying on a .button class */
}
[7 年后更新:删除 * 选择器让一些评论者高兴，因为在 2020 年不需要在属性选择器上使用通用选择器的旧浏览器怪癖.]
[Update 7 years later: removed the * selector to make some commenters happy, since the old browser quirk that required universal selector on attribute selectors is unnecessary in 2020.]
原因 #2. 支持原生元素的角色，以支持实现了 ARIA 角色但尚未实现原生元素角色的浏览器.
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.
例如，main"浏览器已经支持角色很多年了，但它是 HTML5 的一个相对较新的补充，所以许多浏览器还不支持 的语义.
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>
这在技术上是多余的，但可以帮助一些用户并且不会伤害任何用户.几年后，这种技术对于 main 来说可能不再需要了.
This is technically redundant, but helps some users and doesn't harm any. In a few years, this technique will likely become unnecessary for main.
原因 #3.7 年后(2020 年)更新:正如至少一位评论者指出的那样，这现在对于自定义元素非常有用，并且正在进行一些规范工作来定义 Web 组件的默认可访问性角色.即使/一旦该 API 标准化，也可能需要覆盖组件的默认角色.
Reason #3. Update 7 years later (2020): As at least one commenter pointed out, this is now very useful for custom elements, and some spec work is underway to define the default accessibility role of a web component. Even if/once that API is standardized, there may be need to override the default role of a component.
注意/回复
您还写道:
我看到有些人是自己编的.是否允许或正确使用角色属性?
I see some people make up their own. Is that allowed or a correct use of the role attribute?
这是允许使用的属性，除非不包括真正的角色.浏览器将应用令牌列表中第一个识别的角色.
That's an allowed 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>
列表中只有 link 和 note 是有效角色，因此链接角色将应用在平台无障碍 API 中，因为它是第一位的.如果您使用自定义角色，请确保它们与 ARIA 中定义的任何角色或您使用的宿主语言(HTML、SVG、MathML 等)不冲突
Out of the list, only link and note are valid roles, and so the link role will be applied in the platform accessibility API 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屋！
