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

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

例如：考虑其基本概念被定义为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> 

这里页面作者希望用咏叹调级属性为李家。尽管aria-labelledby和aria-owns可以应用于基本标记的所有元素，但是aria-level属性要求该元素有一定的作用。由于ARIA规范使用Web本体语言（OWL）来表示类层次结构中的角色。 OWL将这些角色描述为类以及它们的状态和属性。因此，为了使用咏叹调级别，该元素必须被定义为简单的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列表（由申报单的）任何其他普通的HTML列表。

Answer 2

您的问题有点含糊不清，但如果您问是否将lide项目添加role =“listitem”，已将其作为默认角色，那么对该特定问题的答案是 ：

（是的，使用li是div的首选，如果你是从div开始，需要role =“listitem”，尽管li是首选;但我不认为这就是你问）。

看看这个blog post by Steve Faulkner;他将关于在HTML5中使用各种ARIA角色的时间和地点的最佳实践文档汇总在一起。该文档目前是here，但由于它是非官方的草稿，我不知道该链接是否仍然可以在将来使用。

一般而言，如果该角色与元素的默认角色相同，则不需要（也不应该）为元素指定角色。因此，因为li元素具有listitem的默认角色，所以没有理由重新说明。

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