使用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 li.baseConcept HTML li几乎与role ="listitem"定义完全相同,只是它没有继承任何属性.更多信息

因此,请考虑以下示例:

<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首选使用a 代替div。。role="listitem"如果您使用的是a ，则需要使用div。但是我认为这并不是您要的。）

查阅Steve Faulkner的《使用ARIA》；他编写了一份最佳实践文档草稿，内容涉及何时何地在HTML5中使用各种ARIA角色。

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

此规则有一些例外，它们主要与浏览器尚未正确实现默认角色的新HTML5元素有关。因此，举例来说，由于HTML5的article元素尚未被所有的浏览器暴露为具有role的article，那么<article role='article'>在这一点，类似的案件实际上是推荐。