Editorial: note to expand radiogroup content 'allowances'#2159
Merged
Conversation
rahimabdi
reviewed
Apr 16, 2024
index.html
Outdated
| that are enabled only when a specific radio button has been chosen (checked).</p> | ||
| <p>However, including non-radio button content into a <code>radiogroup</code> is not without its potential UX drawbacks. As it is generally expected | ||
| to use arrow keys to navigate between radio buttons, any non-radio button content could go unnoticed by some users, as arrowing through the radio buttons | ||
| would mean that any other tabbable elements (e.g., hyperlinks or other form fields) would be skipped. When creating a <code>radiogroup</code> with other |
Contributor
There was a problem hiding this comment.
As it is generally expected to use arrow keys to navigate between radio buttons, any non-radio button content could go unnoticed by some users, as arrowing through the radio buttons would mean that any other tabbable elements (e.g., hyperlinks or other form fields) would be skipped.
A couple questions/comments:
- If interactive, non-radio button content (e.g., an additional field that appears on radio button selection) is also nested within the radiogroup, would this require extra work to keep track of focus? It sounds like this results in additional complexity for keyboard operability, i.e., when a radio button is focused, focus should move to the next tabbable element inside the radiogroup (if present) and not the next focusable element immediately after the radio group content
- For additional non-radio content that appears on focus of a radio button, it sounds like this is OK provided the content appears after the current point of focus?
- I'm also curious if this could break cardinality and AT reporting of how many items are in the radiogroup. Perhaps ATs can compensate for additional non-radio button content by adding the extra non-radio button stuff to ensure accurate setsize/posinset? I agree this should be discouraged for the reasons you've mentioned (and that it would be jarring for AT users to get kicked out of forms/focus mode when navigating non-interactive, non-radio button content)
Member
Author
There was a problem hiding this comment.
quickly, but we can discuss more when we talk about this issue w/the group
- for better/worse, i wouldn't expect any 'extra' keyboard focus work than what authors are doing now / how this would work if people used native HTML elements instead.
- i think there could be additional author guidance for this pattern. apg might be better suited for that.
- it shouldn't break anything? as far as i'm aware, radiogroups only provide setsize/posinset based on the radio buttons within, and don't include other items into the total count. If anything is doing otherwise, imo, that's a bug.
i made a quick demo in place of typing out many other words to describe current/expected behaviors.
pkra
added
the
editorial
Member
|
Rebased on main |
✅ Deploy Preview for wai-aria ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
spectranaut
moved this to Needs Review
in ARIA Editorial (Spec Prose Updates) PR Tracking
pkra
approved these changes
Jun 20, 2025
7 tasks
This PR attempts to close #1721 Per the discussion we had around the issue, the potential usability and wcag issues this could cause, there were few pros to relaxing how one could create a grouping of radio buttons. The issue of how would one name such a group if there is no actual "group" container to name was a very good point. Though HTML allows for such loose grouping of their radio buttons, they do not have a solution for all the potential a11y problems it can solve. So, this PR takes a different approach to resolving the issue, and instead adds a note to clarify that a radiogroup does not have to be limited to just radio buttons, while ALSO pointing out the potential UX issues of adding other arbitrary/focusable elements. Maybe something could even be added to overtly state that "hey if you want to group radio buttons like you can in HTML, then use HTML radio buttons!" Happy to wordsmith this further (examples might be good?) Or entertain other solutions (we could close the issue as won't fix, but i recall being told we should do _something_ rather than just that). I created #2158 as a separate issue to resolve, since a lot of the conversation about this concept touched on the topic now logged in that issue. and I didn't want resolving this issue/pr to lose that separate though related topic.
daniel-montalvo
force-pushed
the
radiogroup-note
branch
from
28e1221 to
8bfb2f4
Compare
Contributor
|
Conflicts resolved! |
smhigley
approved these changes
Sep 4, 2025
scottaohara
commented
Feb 26, 2026
Contributor
|
🚀 Deployed on https://deploy-preview-2159--wai-aria.netlify.app |
pkra
reviewed
Feb 26, 2026
Co-authored-by: Peter Krautzberger <p.krautzberger@gmail.com>
github-project-automation
bot
moved this from Needs Review
to Reviewed, need PR checklist item
in ARIA Editorial (Spec Prose Updates) PR Tracking
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
7 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
🚀 Netlify Preview:
🔄 this PR updates the following sspecs:
This PR attempts to close #1721
Per the discussion we had around the issue, the potential usability and wcag issues this could cause, there were few pros to relaxing how one could create a grouping of radio buttons. The issue of how would one name such a group if there is no actual "group" container to name was a very good point. Though HTML allows for such loose grouping of their radio buttons, they do not have a solution for all the potential a11y problems it can solve.
So, this PR takes a different approach to resolving the issue, and instead adds a note to clarify that a radiogroup does not have to be limited to just radio buttons, while ALSO pointing out the potential UX issues of adding other arbitrary/focusable elements.
Maybe something could even be added to overtly state that "hey if you want to group radio buttons like you can in HTML, then use HTML radio buttons!"
Happy to wordsmith this further (examples might be good?) Or entertain other solutions (we could close the issue as won't fix, but i recall being told we should do something rather than just that).
I created #2158 as a separate issue to resolve, since a lot of the conversation about this concept touched on the topic now logged in that issue. and I didn't want resolving this issue/pr to lose that separate though related topic.
Preview | Diff