17

刚刚介绍了一些关于ARIA 角色的战略规格。为什么ul有 ARIA 角色menu却被menuitem禁止li？

我想描述一个使用ul,li和 HTML5 的nav元素结合 ARIA 角色navigation,menu和menuitem.

<!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 的 HTML5 验证器在这里唠叨我：

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

4

5 回答 5

20

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

关于menuitem不允许按照 HTML 规范，我相信这是一个错误。因此，我提交了一个错误。它现在在我的错误队列中等待解决。

我也在 HTML文档中针对W3C 验证器和wai-aria提交了一个错误。在修复验证器之前，我建议您按照 WAI-ARIA 规范使用角色并忽略验证器。

附录：

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

于 2013-05-26T13:34:49.157 回答
3

以下 HTML 标记位于 ARIA 规范本身（您链接的那个）中，并且清楚地显示了一个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…&lt;/li>
      …
    </ul>
  </li>
  …
</ul>
于 2013-05-25T18:08:45.173 回答
1

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

查看菜单的aria-practices示例。

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

或者

<li role="menuitem">my menuitem here</li>
于 2017-05-19T09:30:38.647 回答
0

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

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

于 2013-05-25T21:21:27.760 回答
0

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

于 2013-05-27T05:56:52.137 回答