Html 使用role="list" 和role="listitem" 的原因是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/11131234/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
The reason to use role="list" and role="listitem"?
提问by Ian Y.
Are there any benefits of using the following code?
使用以下代码有什么好处吗？
<ul role="list">
<li role="listitem"></li>
<li role="listitem"></li>
<li role="listitem"></li>
</ul>
Does the following code have the same meaning to assistive technologies?
以下代码与辅助技术的含义相同吗？
<ul>
<li></li>
<li></li>
<li></li>
</ul>
回答by Ravi Kadaboina
The answer is yes, assistive technologies work well when correct semantic markup is used for structuring the document. If it is a simple static list then there is no need to mark them with the roles.
答案是肯定的，当使用正确的语义标记来构建文档时，辅助技术可以很好地工作。如果它是一个简单的静态列表，则不需要用角色标记它们。
For example: Consider the role="listitem"whose baseConcept is defined as HTML li. And the baseConcept HTML li is almost identical to the role="listitem" definition except for the fact that it does not inherit any properties. More info
例如： 考虑将baseConcept 定义为 HTML li的role="listitem"。并且 baseConcept HTML li 几乎与 role="listitem" 定义相同，只是它不继承任何属性。更多信息
Thus, consider the following example:
因此，请考虑以下示例：
<h3 id="header">Vegetables</h3>
<ul role="list" aria-labelledby="header" aria-owns="external_listitem">
<li role="listitem" aria-level="3">Carrot</li>
<li role="listitem" aria-level="3">Tomato</li>
<li role="listitem" aria-level="3">Lettuce</li>
</ul>
…
<div role="listitem" id="external_listitem">Asparagus</div>
Here the page author wants to use aria-level property for the li. Even though aria-labelledby and aria-owns can be applied to all elements of base markup, aria-levelproperty requires that the element have some role. Since ARIA spec uses Web Ontology Language (OWL) to represent the roles in a class hierarchy. OWL describes these roles as classes along with their states and properties. So inorder to use a aria-level the element has to be defined some role as plain HTML li will not inherit any properties or limitations. Once you mark the role as listitem it requires that listitem be owned by an element with role="list". So you end up using both the roles.
这里页面作者想要为 li 使用 aria 级别的属性。尽管 aria-labelledby 和 aria-owns 可以应用于基础标记的所有元素，但aria-level属性要求元素具有某种作用。由于 ARIA 规范使用 Web Ontology Language (OWL) 来表示类层次结构中的角色。OWL 将这些角色连同它们的状态和属性一起描述为类。因此，为了使用 aria 级别的元素，必须定义一些角色，因为纯 HTML li 不会继承任何属性或限制。将角色标记为 listitem 后，它要求 listitem 由具有 role="list" 的元素拥有。所以你最终使用了这两个角色。
On the other hand roles are also useful if semantic markup is also not used. For example:
另一方面，如果不使用语义标记，角色也很有用。例如：
<div role="list">
<div role="listitem">dog</div>
<div role="listitem">cat</div>
<div role="listitem">sparrow</div>
<div role="listitem">wolf!</div>
</div>
Here the screen reader software will indicate the ARIA list (made up of divs) as any other normal HTML list.
在这里，屏幕阅读器软件将指示 ARIA 列表（由 div 组成），就像任何其他正常的 HTML 列表一样。
回答by BrendanMcK
You question is a bit ambiguous, but if you are asking whether there's a benefit to adding role="listitem"to liitems, which already have that as their default role, then the answer to that specific question is'No.'
您的问题有点含糊不清，但如果您要问添加role="listitem"到li项目是否有好处，这些项目已经将其作为默认角色，那么该特定问题的答案是“否”。
(Yes, the use of a liis preferred instead of a div. And role="listitem"is needed if you were using a div. But I don't think that's quite what you are asking.)
（是的，li首选使用 a而不是 a div。role="listitem"如果您使用的是a ，则需要使用div。但我认为这不是您要问的。）
Check out Using ARIA by Steve Faulkner; he's put together a draft best-practices document on when and where to use the various ARIA roles in HTML5.
查看史蒂夫·福克纳的《使用 ARIA》；他整理了一份关于何时何地在 HTML5 中使用各种 ARIA 角色的最佳实践文档草案。
Generally speaking, you don't need to (and shouldn't) specify a role for elements if that role is the same as the element's default role. So since lielements have a default roleof listitem, there's no reason to restate that.
一般来说，如果该角色与元素的默认角色相同，则不需要（也不应该）为元素指定角色。因此，由于li元素的默认role值为listitem，因此没有理由重申这一点。
There are some exceptions to this rule, and they're mostly concerned with new HTML5 elements that browsers have not yet correctly implemented default roles for. So, for example, since HTML5's articleelement isn't yet exposed by all browsers as having a roleof article, then <article role='article'>is actually recommended in that and similar cases.
此规则有一些例外，它们主要涉及浏览器尚未正确实现默认角色的新 HTML5 元素。因此，例如，由于 HTML5 的article元素尚未被所有浏览器公开为具有roleof article，<article role='article'>因此实际上建议在这种情况下和类似情况下使用。
