aria
aria copied to clipboard
Clarify Accessibility Parent-Child Relationships for menu, group, and menuitem
Closes #2438
The current specifications for menu and menubar contradict those for menuitem, menuitemcheckbox, and menuitemradio.
Specifically, the following structure is allowed under the menu role but not when considering the menuitem role:
<div role="menu">
<div role="group">
<span role="menuitem">Item 1</span>
<div role="group">
<span role="menuitem">Item 2</span>
<span role="menuitem">Item 3</span>
</div>
</div>
</div>
This PR clarifies that this structure is indeed allowed.
Additionally, it explicitly clarifies in a note that the following example, where a group contains a button and an input as accessibility children, is not permitted. This prevents ambiguity by making it clear that having at least one menuitem as an accessibility child of the group does not justify including other unrelated elements, which was not clearly stated.
<div role="menu">
<div role="group">
<span role="menuitem">Item 1</span>
<div role="group">
<span role="menuitem">Item 2</span>
<span role="menuitem">Item 3</span>
</div>
<button>Test</button>
<input type="text aria-label="Test">
</div>
</div>
This update refines the specifications for menu, menubar, menuitem, menuitemcheckbox, and menuitemradio roles consistently.
Test, Documentation and Implementation tracking
Once this PR has been reviewed and has consensus from the working group, tests should be written and issues should be opened on browsers. Add N/A and check when not applicable.
- [ ] "author MUST" tests:
- [ ] "user agent MUST" tests:
- [ ] Browser implementations (link to issue or commit):
- WebKit:
- Gecko:
- Blink:
- [ ] Does this need AT implementations?
- [ ] Related APG Issue/PR:
- [ ] MDN Issue/PR:
Deploy Preview for wai-aria ready!
| Name | Link |
|---|---|
| Latest commit | 7048eb6295e6438239fc9d8ead70a3205214b133 |
| Latest deploy log | https://app.netlify.com/projects/wai-aria/deploys/6894db20b48ac70008cbe264 |
| Deploy Preview | https://deploy-preview-2483--wai-aria.netlify.app |
| Preview on mobile | Toggle QR Code...Use your smartphone camera to open QR code link. |
To edit notification comments on pull requests, go to your Netlify project configuration.
@np-at to review as well!
actually, taking myself off as a reviewer since we have so many others.
@pkra, I just realized the same issue affects tree/group/treeitem structures. Should we include this change in this PR or create a separate one?
@giacomo-petri sounds good. Hopefully it's simpler since #2094 prevents group as child of tree.
Discussed in today's meeting: https://www.w3.org/2025/07/03-aria-minutes.html#3a9f
@spectranaut, I agree that we likely need a definition for "intervening," but it's already used 7 times in the specs, though always referring to generic or none. That said, I think the current wording for group doesn't add complexity and still aligns with the intent of the others, even if the context and outcome differ. Should we consider trying adding that definition (since it also impacts generic intervening) in a separate PR?
I'm not sure why my last review is marked "requesting changes" - I'm guessing the suggested change is to blame.
I don't oppose merging this as is, despite remaining somewhat unhappy with the language.