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

Just covered out some strage specs regarding ARIA roles. Why does ul have ARIA role menu but menuitem is forbidden for li?

刚刚介绍了一些关于ARIA角色的规范。为什么ul有ARIA角色菜单但是li禁止使用menuitem？

I would like to describe a navigation bar using ul, li and HTML5's nav element in combination with the ARIA roles navigation, menu and menuitem.

我想用ul，li和HTML5的nav元素结合ARIA角色导航，菜单和菜单项来描述导航栏。

<!DOCTYPE html>
<html>
  <head><title>ARIA role bug?</title></head>
  <body>
    <nav role="navigation">
      <ul role="menu">
        <li role="menuitem"><a href="http://example.com/">example.com</a></li>
      </ul>
    </nav>
  </body>
</html>

W3's HTML5 validator nag me here:

W3的HTML5验证器在这里唠叨我：

Bad value menuitem for attribute role on element li.

元素li上属性角色的错误菜单项。

5 个解决方案

#1

Jukka is incorrect here. The W3C validator does not check against the WHATWG LS, instead it checks against the W3C HTML specification. The W3C HTML spec is the authoritative source for conformance checking requirements for the W3C Validator.

Jukka在这里不正确。 W3C验证器不会检查WHATWG LS，而是检查W3C HTML规范。 W3C HTML规范是W3C Validator一致性检查要求的权威来源。

In regards to menuitem not being allowed as per the HTML spec, I believe this is a bug. And as such I have filed a bug. It is now in my bug queue to be resolved.

关于不符合HTML规范的menuitem，我相信这是一个错误。因此我提出了一个错误。它现在在我的bug队列中得到解决。

I have filed a bug against the W3C validator and wai-aria in HTML doc as well. Until such times the validator is fixed, I suggest you use the roles as per the WAI-ARIA spec and ignore the validator.

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

addendum:

附录：

I looked back at history of ARIA integration into HTML could not find any reason why menuitem was not allowed, so believe it was an oversight. I fixed and resolved the bug I referenced above.

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

#2

The following HTML markup is in the ARIA spec itself (the one you linked), and clearly shows a LI (nested, even) being used as a menuitem. Im guessing the particular markup you are using is forcing it to non-conform but thats just a hunch.

以下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>

#3

The W3C validator, when applying HTML5 rules, actually checks against (some version of) the WHATWG “Living HTML standard”, which currently says, in clause 3.2.7 WAI-ARIA, about “li element whose parent is an ol or ul element” the following: “Role must be either listitem, menuitemcheckbox, menuitemradio, option, tab, or treeitem”.

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

This corresponds to the rules in the “Using WAI-ARIA in HTML” W3C draft, in 2.9 Recommendations Table.

这对应于2.9建议表中“在HTML中使用WAI-ARIA”W3C草案中的规则。

#4

I was using a similar DOM and changing an li submenu's role to presentation made the the page validate. Although perhaps semantically incorrect, in my situation it is inconsequential.

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

#5

You shouldn't put role="menuitem" on an li element when it contains an a element since a menuitem widget cannot contain any intereactive elements (e.g links).

当一个元素包含一个元素时，你不应该在一个li元素上放置role =“menuitem”，因为menuitem小部件不能包含任何交互元素（例如链接）。

Take a look at the aria-practices examples for menu.

看一下菜单上的咏叹调练习示例。

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

要么

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

#1