为什么要使用role="list“和role="listitem"？

Question

使用以下代码有什么好处吗？

<ul role="list">
    <li role="listitem"></li>
    <li role="listitem"></li>
    <li role="listitem"></li>
</ul>

下面的代码对辅助技术有同样的意义吗？

<ul>
    <li></li>
    <li></li>
    <li></li>
</ul>

Answer 1

答案是肯定的，当使用正确的语义标记来组织文档时，辅助技术工作得很好。如果它是一个简单的静态列表，那么就不需要用角色来标记它们。

例如:考虑role="listitem"，它的baseConcept被定义为HTML。除了不继承任何属性之外，baseConcept HTML li几乎与role="listitem“定义相同。更多info

因此，考虑以下示例：

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

在这里，页面作者希望对li使用aria-level属性。尽管aria-labelledby和aria-owns可以应用于基本标记的所有元素，但aria-level属性要求元素具有一定的角色。因为ARIA规范使用Web Ontology Language (OWL)来表示类层次结构中的角色。OWL将这些角色描述为类以及它们的状态和属性。因此，为了使用aria级别，必须将元素定义为某个角色，因为普通HTML li不会继承任何属性或限制。一旦您将角色标记为listitem，它就要求listitem由一个带有role="list“的元素拥有。所以你最终会同时使用这两个角色。

另一方面，如果也不使用语义标记，则角色也很有用。例如：

<div role="list">
  <div role="listitem">dog</div>
  <div role="listitem">cat</div>
  <div role="listitem">sparrow</div>
  <div role="listitem">wolf!</div>
</div>

在这里，屏幕阅读器软件会将ARIA列表(由div组成)指示为任何其他普通的HTML列表。

Answer 2

你的问题有点模棱两可，但如果你问的是将role="listitem"添加到li项目中是否有好处，这些项目已经将其作为默认角色，那么对这个特定问题的答案是“没有”。

(是的，优先使用li而不是div。如果您使用的是div，则需要role="listitem"。但我认为这并不是您所要求的。)

查看Using ARIA by Steve Faulkner；他整理了一份最佳实践文档草案，说明在HTML5中何时何地使用各种ARIA角色。

一般来说，如果角色与元素的默认角色相同，则不需要(也不应该)为元素指定角色。因此，由于li元素的默认role为listitem，因此没有理由重复这一点。

这条规则也有一些例外，它们主要关注浏览器尚未正确实现默认角色的新HTML5元素。因此，例如，由于HTML5的article元素还没有被所有浏览器公开为具有article的role，因此在这种和类似的情况下，<article role='article'>实际上是推荐的。