Skip to content

Clarify Accessibility Parent-Child Relationships for menu, group, and menuitem #2483

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
giacomo-petri wants to merge 15 commits into
base: main
Choose a base branch
from
Open

Clarify Accessibility Parent-Child Relationships for menu, group, and menuitem #2483

Changes from 2 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
269e806
Update index.html
giacomo-petri Mar 21, 2025
e980d4b
chore: prettier
giacomo-petri Mar 21, 2025
6ff9aad
Update index.html
giacomo-petri Mar 21, 2025
6678aef
Update index.html
giacomo-petri Mar 21, 2025
c5ee99a
Update index.html
giacomo-petri Mar 21, 2025
0237660
chore: prettier
giacomo-petri Mar 21, 2025
6e9a04b
Update index.html
giacomo-petri Mar 25, 2025
79f6da9
chore: prettier
giacomo-petri Mar 25, 2025
db5ed08
Update index.html
giacomo-petri Mar 25, 2025
d14eff8
chore: prettier
giacomo-petri Mar 25, 2025
cecd778
Update index.html
giacomo-petri Mar 25, 2025
2b66bd0
edit to group def, implementing Valerie's suggetion
giacomo-petri Aug 4, 2025
e155a27
Update index.html
giacomo-petri Aug 5, 2025
35bfe75
updated menu and menubar notes
giacomo-petri Aug 5, 2025
7048eb6
replaced group with specific acc desc with group as intervening
giacomo-petri Aug 7, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 23 additions & 6 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -792,9 +792,9 @@ <h2>Non-interference with the Host Language</h2>
language.
</p>
<p>
If a CSS selector includes a WAI-ARIA attribute (e.g., <code class="highlight css">input[aria-invalid="true"]</code>), user agents MUST update the visual display of any elements
matching (or no longer matching) the selector any time the attribute is added/changed/removed in the <abbr title="Document Object Model">DOM</abbr>. The user agent MAY alter the mapping of
the host language features into an <a>accessibility <abbr title="Application Programming Interface">API</abbr></a
If a CSS selector includes a WAI-ARIA attribute (e.g., <code class="highlight css">input[aria-invalid="true"]</code>), user agents MUST update the visual display of any elements matching (or
no longer matching) the selector any time the attribute is added/changed/removed in the <abbr title="Document Object Model">DOM</abbr>. The user agent MAY alter the mapping of the host
language features into an <a>accessibility <abbr title="Application Programming Interface">API</abbr></a
>, but the user agent MUST NOT alter the <abbr title="Document Object Model">DOM</abbr> in order to remap <abbr title="Accessible Rich Internet Applications">WAI-ARIA</abbr> markup into host
language features.
</p>
Expand Down Expand Up @@ -6200,6 +6200,11 @@ <h4>Plain HTML or Polyfill DOM Result of the MathML Quadratic Formula</h4>
</p>
<p>To be <a>keyboard accessible</a>, authors SHOULD manage focus of descendants for all instances of this <a>role</a>, as described in <a href="#managingfocus">Managing Focus</a>.</p>
<p>Elements with the role <code>menu</code> have an implicit <pref>aria-orientation</pref> value of <code>vertical</code>.</p>
<p class="note">
The <code>menu</code> <a>role</a> doesn't allow for accessibility children roles other than <rref>menuitem</rref>, <rref>menuitemcheckbox</rref>, <rref>menuitemradio</rref>,
<rref>separator</rref>, and <rref>group</rref>. In this context, the role <rref>group</rref> allows only <a>accessibility children</a> with a role <rref>group</rref>,
<rref>menuitem</rref>, <rref>menuitemcheckbox</rref>, <rref>menuitemradio</rref> or <rref>separator</rref>.
</p>
Copy link
Member

@pkra pkra Aug 27, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I admit I'm still unhappy with this.

I don't like how the second sentence contradicts the first sentence's "allows only roles". I don't like "structural" in "structural element" nor how generics are mentioned (which can always be added after all so here a reader might wonder what is special about mentioning them again).

I also do not like the duplication of this language in menubar; it will invariably fall out of sync.

I realize we cannot get to something as tight as we have for trees, but I think we should work on this concept rather than adding more complicated language like this throughout the spec.

Still, I don't want to keep blocking this.

</div>
<table class="def">
<caption>
Expand Down Expand Up @@ -6245,9 +6250,11 @@ <h4>Plain HTML or Polyfill DOM Result of the MathML Quadratic Formula</h4>
<td class="role-mustcontain">
<ul>
<!-- keep in sync with #menubar -->
<li><rref>group</rref> with <a>accessibility child</a> <rref>group</rref></li>
<li><rref>group</rref> with <a>accessibility child</a> <rref>menuitem</rref></li>
<li><rref>group</rref> with <a>accessibility child</a> <rref>menuitemradio</rref></li>
<li><rref>group</rref> with <a>accessibility child</a> <rref>menuitemcheckbox</rref></li>
<li><rref>group</rref> with <a>accessibility child</a> <rref>separator</rref></li>
<li><rref>menuitem</rref></li>
<li><rref>menuitemcheckbox</rref></li>
<li><rref>menuitemradio</rref></li>
Expand Down Expand Up @@ -6304,6 +6311,11 @@ <h4>Plain HTML or Polyfill DOM Result of the MathML Quadratic Formula</h4>
</p>
<p>To be <a>keyboard accessible</a>, authors SHOULD manage focus of descendants for all instances of this <a>role</a>, as described in <a href="#managingfocus">Managing Focus</a>.</p>
<p>Elements with the role <code>menubar</code> have an implicit <pref>aria-orientation</pref> value of <code>horizontal</code>.</p>
<p class="note">
The <code>menubar</code> <a>role</a> doesn't allow for accessibility children roles other than <rref>menuitem</rref>, <rref>menuitemcheckbox</rref>, <rref>menuitemradio</rref>,
<rref>separator</rref>, and <rref>group</rref>. In this context, the role <rref>group</rref> allows only <a>accessibility children</a> with a role <rref>group</rref>,
<rref>menuitem</rref>, <rref>menuitemcheckbox</rref>, <rref>menuitemradio</rref> or <rref>separator</rref>.
</p>
</div>
<table class="def">
<caption>
Expand Down Expand Up @@ -6345,9 +6357,11 @@ <h4>Plain HTML or Polyfill DOM Result of the MathML Quadratic Formula</h4>
<td class="role-mustcontain">
<ul>
<!-- keep in sync with #menu -->
<li><rref>group</rref> with <a>accessibility child</a> <rref>group</rref></li>
<li><rref>group</rref> with <a>accessibility child</a> <rref>menuitem</rref></li>
<li><rref>group</rref> with <a>accessibility child</a> <rref>menuitemradio</rref></li>
<li><rref>group</rref> with <a>accessibility child</a> <rref>menuitemcheckbox</rref></li>
<li><rref>group</rref> with <a>accessibility child</a> <rref>separator</rref></li>
Copy link
Member

@pkra pkra Jun 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should be able to reduce this to just group's again.

Copy link
Contributor Author

@giacomo-petri giacomo-petri Aug 5, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@pkra

what about phrasing it as
"group as intervening role"
?

My concern is that if we just list "group" without clarification, some authors, especially those who skip over the note, might incorrectly assume that this kind of structure is valid:

<div role="menu">
    <div role="group">
        <a href="...">...</a>
        <input type="checkbox" ...>
    </div>
</div>

Since WCAG notes are non-normative, there's a real chance the note will be overlooked entirely. By explicitly mentioning "intervening role," we at least raise a red flag and prompt them to think twice (and read the note).

Copy link
Contributor

@spectranaut spectranaut Aug 7, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like that idea!

<li><rref>menuitem</rref></li>
<li><rref>menuitemcheckbox</rref></li>
<li><rref>menuitemradio</rref></li>
Expand Down Expand Up @@ -6400,7 +6414,7 @@ <h4>Plain HTML or Polyfill DOM Result of the MathML Quadratic Formula</h4>
<p>An option in a set of choices contained by a <rref>menu</rref> or <rref>menubar</rref>.</p>
<p>
Authors MUST ensure [=elements=] with <a>role</a> <code>menuitem</code> are <a>accessibility children</a> of an element with role <rref>menu</rref>, <rref>menubar</rref>, or an element
with role <rref>group</rref> that is an <a>accessibility child</a> of an element with role <rref>menu</rref> or <rref>menubar</rref>.
with role <rref>group</rref> that is an <a>accessibility child</a> of an element with role <rref>group</rref>, <rref>menu</rref> or <rref>menubar</rref>.
</p>
<p>
Authors MAY disable a menu item with the <sref>aria-disabled</sref> attribute. If the menu item has its <pref>aria-haspopup</pref> attribute set to <code>true</code>, it indicates that
Expand Down Expand Up @@ -6457,6 +6471,7 @@ <h4>Plain HTML or Polyfill DOM Result of the MathML Quadratic Formula</h4>
<ul>
<li><rref>menu</rref></li>
<li><rref>menubar</rref></li>
<li><rref>group</rref> with <a>accessibility parent</a> <rref>group</rref></li>
<li><rref>group</rref> with <a>accessibility parent</a> <rref>menu</rref></li>
<li><rref>group</rref> with <a>accessibility parent</a> <rref>menubar</rref></li>
</ul>
Expand Down Expand Up @@ -6520,7 +6535,7 @@ <h4>Plain HTML or Polyfill DOM Result of the MathML Quadratic Formula</h4>
<p>A <rref>menuitem</rref> with a checkable state whose possible <span>values</span> are <code>true</code>, <code>false</code>, or <code>mixed</code>.</p>
<p>
Authors MUST ensure [=elements=] with <a>role</a> <code>menuitemcheckbox</code> are <a>accessibility children</a> of an element with role <rref>menu</rref>, <rref>menubar</rref>, or an
element with role <rref>group</rref> that is an <a>accessibility child</a> of an element with role <rref>menu</rref> or <rref>menubar</rref>.
element with role <rref>group</rref> that is an <a>accessibility child</a> of an element with role <rref>group</rref>, <rref>menu</rref> or <rref>menubar</rref>.
</p>
<p>
The <sref>aria-checked</sref> <a>attribute</a> of a <code>menuitemcheckbox</code> indicates whether the menu item is checked (<code>true</code>), unchecked (<code>false</code>), or
Expand Down Expand Up @@ -6573,6 +6588,7 @@ <h4>Plain HTML or Polyfill DOM Result of the MathML Quadratic Formula</h4>
<ul>
<li><rref>menu</rref></li>
<li><rref>menubar</rref></li>
<li><rref>group</rref> with <a>accessibility parent</a> <rref>group</rref></li>
<li><rref>group</rref> with <a>accessibility parent</a> <rref>menu</rref></li>
<li><rref>group</rref> with <a>accessibility parent</a> <rref>menubar</rref></li>
</ul>
Expand Down Expand Up @@ -6632,7 +6648,7 @@ <h4>Plain HTML or Polyfill DOM Result of the MathML Quadratic Formula</h4>
<p>A checkable <rref>menuitem</rref> in a set of elements with the same role, only one of which can be checked at a time.</p>
<p>
Authors MUST ensure [=elements=] with <a>role</a> <code>menuitemradio</code> are <a>accessibility children</a> of an element with role <rref>menu</rref>, <rref>menubar</rref>, or an
element with role <rref>group</rref> that is an <a>accessibility child</a> of an element with role <rref>menu</rref> or <rref>menubar</rref>.
element with role <rref>group</rref> that is an <a>accessibility child</a> of an element with role <rref>group</rref>, <rref>menu</rref> or <rref>menubar</rref>.
</p>
<p>
Authors SHOULD enforce that only one <code>menuitemradio</code> in a group can be checked at the same time. When one item in the group is checked, the previously checked item becomes
Expand Down Expand Up @@ -6690,6 +6706,7 @@ <h4>Plain HTML or Polyfill DOM Result of the MathML Quadratic Formula</h4>
<ul>
<li><rref>menu</rref></li>
<li><rref>menubar</rref></li>
<li><rref>group</rref> with <a>accessibility parent</a> <rref>group</rref></li>
<li><rref>group</rref> with <a>accessibility parent</a> <rref>menu</rref></li>
<li><rref>group</rref> with <a>accessibility parent</a> <rref>menubar</rref></li>
</ul>
Expand Down