"Attribute aria-expanded not allowed on element li at this point"

Question

I have the following code (from here):

<div role="menubar">
    <ul role="menu" aria-label="functions" id="appmenu">
            <li role="menuitem" aria-haspopup="true" tabindex="0" aria-expanded="false">
                File
                <ul role="menu">
                            <li role="menuitem" tabindex="-1">New</li>
                            <li role="menuitem" tabindex="-1">Open</li>
                            <li role="menuitem" tabindex="-1">Print</li>
                    </ul>
            </li>
            <li role="menuitem" aria-haspopup="true" tabindex="-1" aria-expanded="false">
                Edit
                <ul role="menu">
                            <li role="menuitem" tabindex="-1">Undo</li>
                            <li role="menuitem" tabindex="-1">Redo</li>
                            <li role="menuitem" tabindex="-1">Cut</li>
                            <li role="menuitem" tabindex="-1">Copy</li>
                            <li role="menuitem" tabindex="-1">Paste</li>
                    </ul>
            </li>
            <li role="menuitem" aria-haspopup="true" tabindex="-1" aria-expanded="false">
                    Format
                    <ul role="menu">
                            <li role="menuitem" tabindex="-1">Font</li>
                            <li role="menuitem" tabindex="-1">Text</li>
                    </ul>
            </li>
            <li role="menuitem" aria-haspopup="true" tabindex="-1" aria-expanded="false">
                View
                <ul role="menu">
                    <li role="menuitem" tabindex="-1">100%</li>
                    <li role="menuitem" tabindex="-1">Zoom In</li>
                    <li role="menuitem" tabindex="-1">Zoom Out</li>
                </ul>
            </li>
            <li role="menuitem" tabindex="-1" aria-expanded="false">Help</li>
    </ul>
</div>

However when I try to validate (via the W3C validator) that HTML piece it gives the error:

Attribute aria-expanded not allowed on element li at this point.

As this is an official W3C example I’m a little bit confused as their own example didn’t validate with their own validator. What’s wrong here?

Prog

Answer 1

Maintainer of the W3C HTML checker (validator) here. I think the checker’s behaving as expected for this, because aria-expanded with role=menuitem isn’t allowed by the ARIA spec.

As far as why https://www.w3.org/WAI/tutorials/menus/examples/appmenu/ has invalid markup, in my experience there are a number of examples there which are invalid. Nothing there’s meant to be official/authoritative in the same sense that the ARIA spec and other specs are though, so when you notice an example like which doesn’t match the ARIA spec requirements, you should report it at https://github.com/w3c/wai-tutorials/issues so that the example can be fixed.

In my experience, if people take time to report bugs in those tutorials, they get fixed quickly.

2017-07-09 Update: See also the answer at About use 'aria-expanded' on 'role=menuitem' and see https://github.com/w3c/aria/issues/454 “ARIA 1.1: aria-expanded is not supported on menuitem roles” in the ARIA Working Group’s issue tracker for the ARIA spec.

Cortex

hm ok, i will try that and will check which feedback we get from there. – Prog

Answer 2

So according to the draft here the following should be used:

<ul role="menubar" id="appmenu">
	…
	<li role="menuitem" aria-haspopup="true">
		Edit
		<ul role="menu">
			<li role="menuitem">Undo</li>
			<li role="menuitem">Redo</li>
			<li role="separator"></li>
			<li role="menuitem">Cut</li>
			<li role="menuitem">Copy</li>
			<li role="menuitem">Paste</li>
			</ul>
		</li>
	…
</ul>

However there is now a note which said "Application menus typically do not have links and rely on scripting to provide the functionality." so the correct menu for a website might be this here.

Prog