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

html accessibility wai-aria
burnersk picture burnersk · May 25, 2013 · Viewed 10.9k times · Source

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.

Answer

Steve Faulkner picture Steve Faulkner · May 26, 2013

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.

Related questions

The purpose of using "aria-labelledby" on already labeled input elements?

Many ARIA demonstration websites use code such as: <label for="name" id="label-name">Your Name</label> <input id="name" aria-labelledby="label-name" type="text"> But what's the purpose of using aria-labelledby attribute in this case? …

Read More
Can someone explain the HTML5 aria-* attribute?

I wanted to know what the aria-* attributes are used for. What values can they have, and are they defined values or can I create my own values?

Read More
When to use the disabled attribute vs the aria-disabled attribute for HTML elements?

I'm trying to make a form accessible. Should I make my inputs have both disabled and aria-disabled attributes, or just one? <label for="textbox1">Input</label> <input id="textbox1" type="text" name="Text Box" disabled&…

Read More