使用 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" 添加到li 项目是否有好处，已经将其作为默认角色，那么该特定问题的答案是 “没有。”

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

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

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

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

Answer 2

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

例如：考虑role="listitem"，其baseConcept 定义为HTML li。 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 列表。