Why does `ul` have ARIA role `menu` but `menuitem` is forbidden for `li`?
Solution 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.
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.
Solution 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.
<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>
Solution 3
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>
Related videos on Youtube
burnersk
Updated on May 19, 2020Comments
-
burnersk almost 4 years
Just covered out some strage specs regarding ARIA roles. Why does
ul
have ARIA rolemenu
butmenuitem
is forbidden forli
?I would like to describe a navigation bar using
ul
,li
and HTML5'snav
element in combination with the ARIA rolesnavigation
,menu
andmenuitem
.<!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.
-
Steve Faulkner almost 11 yearsI have answered below, but would also say that if the navigation consists of just links on on a web page and does not have the interaction behaviour associated with a menu and menu items then the ARIA roles should not be used.Refer to the menu design pattern for more details w3.org/WAI/PF/aria-practices/#menu
-
-
burnersk almost 11 yearsThey have removed it but why?! This is really stupid by the spec writers due to break of spec itself
-
Alastair almost 11 yearsIf you've noticed
Passed, 1 warning(s)
, the warning's because this is a draft specification, as stated:Using experimental feature: HTML5 Conformance Checker.
-
Steve Faulkner almost 11 yearsIn conformance checker parlance: error= MUST level requirement in the HTML spec. Warning = SHOULD level requirement
-
marksyzm over 10 yearspresentation probably makes it ignored and won't be read out by some readers
-
hexalys over 10 yearsDo we really need to specify role="menuitem" here on a <li> element, beyond <ul role="menu">? It is quite verbose and seems redundant of the existing <li> semantic.
-
hexalys over 10 yearsAlso I see the issue as: "Fixed and pushed to the validator" on 2013-06-26. Though it still doesn't validate as of today? Thanks
-
Alan H. almost 8 yearsGood to see this has been reported and fixed.