Why does `ul` have ARIA role `menu` but `menuitem` is forbidden for `li`?

StackOverflow https://stackoverflow.com/questions/16751643

  •  30-05-2022
  •  | 
  •  

Question

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

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.

<!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:

Bad value menuitem for attribute role on element li.

Was it helpful?

Solution

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.

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.

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.

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.

OTHER TIPS

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.

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

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).

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

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

or

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

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”.

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

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top