Question

刚刚介绍了有关ARIA roles的一些特定规格。 为什么ul具有ARIA角色menu但menuitem禁止使用li？

我想使用ul，li和HTML5的nav元素结合ARIA角色navigation，menu和{来描述导航栏{1}}。

menuitem

W3's HTML5 validator唠叨我：

元素li上属性角色的错误值menuitem。

Answer 1

Jukka是incorrect here。 W3C validator不会检查WHATWG LS，而是检查W3C HTML specification。 W3C HTML规范是W3C验证器一致性检查要求的权威来源。

关于根据HTML规范不允许menuitem，我认为这是一个错误。因此我有filed a bug。它现在在我的bug队列中得到解决。

我也提交了针对W3C validator和wai-aria in HTML文档的错误。在确定验证器的时间之前，我建议您根据WAI-ARIA规范使用角色并忽略验证器。

附录：

我回顾过ARIA集成到HTML的历史，找不到任何理由不允许menuitem，所以相信这是一个疏忽。我修复并解决了上面引用的错误。

Answer 2

以下HTML标记位于ARIA规范本身（您链接的那个）中，并清楚地显示用作menuitem的LI（嵌套，偶数）。我猜你正在使用的特定标记是强制它不符合，但这只是一种预感。

<ul role="menubar">

 <!-- Rule 2A: "File" label via aria-labelledby -->
  <li role="menuitem" aria-haspopup="true" aria-labelledby="fileLabel"><span id="fileLabel">File</span>
    <ul role="menu">

      <!-- Rule 2C: "New" label via Namefrom:contents -->
      <li role="menuitem">New</li>
      <li role="menuitem">Open…</li>
      …
    </ul>
  </li>
  …
</ul>

Answer 3

W3C验证器在应用HTML5规则时，实际上检查了WHATWG“生活HTML标准”（某些版本），该标准目前在第3.2.7节WAI-ARIA中说明了“li元素，其父元素是ol或ul元素“以下内容：”角色必须是listitem，menuitemcheckbox，menuitemradio，option，tab或treeitem“。

这对应于“在PHP中使用WAI-ARIA”W3C草案中的规则，在2.9 Recommendations Table中。

Answer 4

我使用了类似的DOM，并将li子菜单的角色更改为presentation，使页面验证。虽然在语义上可能不正确，但在我看来这是无关紧要的。

Answer 5

当 li元素 包含元素时，您不应该将它放在 li元素 上>因为menuitem小部件不能包含任何交互元素（例如链接）。

查看菜单的aria-practices示例。

<li role="none">
  <a role="menuitem">my menuitem here</a>
</li>

或

<li role="menuitem">my menuitem here</li>

为什么`ul`有ARIA角色`menu`但``menuitem`是禁止`li`？

5 个答案: