使用角色=“列表”和角色=“列表项”的原因？

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

例如：考虑将baseConcept定义为HTML li的role="listitem"。而且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本体语言（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

（是的，首选使用li而不是div。如果您使用的是role="listitem"，则需要div。但是我认为这并不是您要的。）

签出Using ARIA by Steve Faulkner;他整理了一份最佳实践文档草案，内容涉及何时何地在HTML5中使用各种ARIA角色。

通常，如果该角色与元素的默认角色相同，则不需要（也不应）为该元素指定角色。因此，由于li元素的默认role为listitem，因此没有理由重述。

该规则有一些例外，它们主要与浏览器尚未正确实现默认角色的新HTML5元素有关。因此，例如，由于尚未将所有浏览器公开HTML5的article元素为role为article，因此实际上在这种情况和类似情况下建议使用<article role='article'>。