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

- Ian Y.

Answer 1

答案是肯定的，只要正确使用语义化标记来结构化文档，辅助技术就可以良好地工作。如果只是一个简单的静态列表，那么无需用角色标记它们。

例如：考虑role="listitem"，其baseConcept被定义为HTML li。而基本概念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本体语言（OWL）来表示类层次结构中的角色。OWL描述这些角色作为类以及它们的状态和属性。因此，为了使用aria-level，必须将元素定义为某个角色，因为普通的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>

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

- Ravi Kadaboina

---

谢谢@Ravi提供的信息。因此，当使用语义标记时，无需使用角色标记一个简单的静态列表。 - Ian Y.

是的，大部分时间都是这样，但这还取决于与浏览器版本一起使用的辅助功能软件。因此，如果您发现屏幕阅读器没有读取特定标记，则可以使用这些角色的组合使其正常工作，直到软件修复该缺陷。因此，没有什么是确定的，只需进行彻底的测试即可。 - Ravi Kadaboina

为什么这个答案说“答案是肯定的”，然后又详细解释答案是否定的呢？很明显是否定的。答案是否定的，将这些角色放在<ul>和<li>元素上没有任何好处，这绝对是问题所问的，毫无歧义。 - callum

Answer 2

你的问题有点模糊，但如果你是在问是否将role="listitem"添加到已经具有默认角色的li项中是否有好处，那么对于这个特定问题的答案是'没有'。

（是的，使用li比使用div更好。如果您使用div，则需要role="listitem"。但我认为这不是您所问的问题。）

请查看Steve Faulkner的ARIA使用;他已经制定了一个关于何时何地使用HTML5中各种ARIA角色的草案最佳实践文件。

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

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

- BrendanMcK

---

嗨，Brendan，目前在HTML中使用ARIA的URL- http://dvcs.w3.org/hg/aria-unofficial/raw-file/tip/index.html 将始终指向文档的编辑草案。 - Steve Faulkner

看起来 Steve 的“在 HTML 中使用 ARIA 笔记”现在在这里：https://www.w3.org/TR/aria-in-html/ - Ryan Grove