-
Notifications
You must be signed in to change notification settings - Fork 324
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.
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
Ability to group radio buttons / checkboxes within sub-headings #1079
Comments
I spoke to Frankie and we put together a coded example: https://tricky-fisher.glitch.me/ |
I was looking to do similar today. I've got a set of 10 or so radios and I'd like to group in to 3 related groups. It's all one question - so tried to do it in one radio group with the divider option - but found it is hardcoded to be too narrow. Also wanted to do similar for checkboxes, but found they don't support divider yet. |
Hey there @edwardhorsford, @frankieroberto and @stevenaproctor. Would you be able to share a few use cases of this pattern here, so we can better understand how it's used in a service and what variations a macro would need to support? Thanks! |
@timpaul here's the example from the pattern I was looking at: I used two |
@timpaul I do not have any examples from HMRC. I will ask in our working group. |
Here's a possible fix: #1163. |
I've been working on this too so thought I'd share my examples: 1. Multiple fieldsets of checkboxes with legends 2. Multiple fieldsets of checkboxes with legends 3. Single fieldset of checkboxes with subheadings We're doing some more screen reader testing on Monday. So far we've not tried @frankieroberto's suggestion above of prefixing (but visually hidden) the nested legends with the parent legend's text. |
@colinrotherham how did you get on with screen reader testing? |
We initially tested version 1 versus 3 and found 3 worked best, but this was thanks to the Why? In version 1 VoiceOver (Safari on Mac) won't automatically read out the parent legend/hint, and it only does this once per child fieldset anyway. This was our workaround. So, with this in mind, we created version 2 which also tested well. We're not sure if it's now too chatty, but it does now provide all the context needed when hints and validation messages apply. Some useful replies from @LJWatson and Chris Bush See the caveats around only using simple cases like this for nested fieldsets. |
We could reproduce version 2 via
|
Adds new examples 1. Group of multiple radio fieldsets 2. Group of multiple checkbox fieldsets Fixes alphagov#1079
Adds new examples 1. Group of multiple radio fieldsets 2. Group of multiple checkbox fieldsets Fixes alphagov#1079
Adds new examples 1. Group of multiple radio fieldsets 2. Group of multiple checkbox fieldsets Fixes alphagov#1079
Adds new examples 1. Group of multiple radio fieldsets 2. Group of multiple checkbox fieldsets Fixes alphagov#1079 # Conflicts: # app/views/examples/form-elements/index.njk
Adds new examples 1. Group of multiple radio fieldsets 2. Group of multiple checkbox fieldsets Fixes alphagov#1079 # Conflicts: # app/views/examples/form-elements/index.njk
Adds new examples 1. Group of multiple radio fieldsets 2. Group of multiple checkbox fieldsets Fixes alphagov#1079
Adds new examples 1. Group of multiple radio fieldsets 2. Group of multiple checkbox fieldsets Fixes alphagov#1079
Re-opening this after a discussion with @edwardhorsford, you can now use conditional reveals with grouped radios but this doesnt answer this specific question of which is the best way to markup multiple groups. |
I'm back looking at this page again. Note: in our case I don't think it's essential you get get read these groupings. They're extra context for the options, but the options themselves are what users are choosing between. If there's a neat way of including them with the options I'd happy use it though. |
Thanks @edwardhorsford, looks good – have you tested this approach with any assistive technologies? I guess you could argue the grouping labels are an enhancement but would be interested to see what the experience is like for screen readers etc. |
@christopherthomasdesign no, this is just in my prototype right now. In our case, we might consider them an enhancement - it'll essentially read the radios in a less-obvious order (but still in priority order). We could preface each option with the text too - might try that and see what it sounds like. |
We have an open issue to provide examples of grouping radios and checkboxes under headings (#1079). Whilst we don’t provide any guidance on this at the minute, we’ve previously suggested that users can achieve this by making multiple calls to the `govukCheckboxes` macro and grouping them together inside a single call to `govukFieldset`. However, this means that each ‘set’ of checkboxes is inside its own module, which can cause issues with things like conditional reveals. Add an example of this to the review app, so that we can test that everything works as expected.
We have an open issue to provide examples of grouping radios and checkboxes under headings (#1079). Whilst we don’t provide any guidance on this at the minute, we’ve previously suggested that users can achieve this by making multiple calls to the `govukCheckboxes` macro and grouping them together inside a single call to `govukFieldset`. However, this means that each ‘set’ of checkboxes is inside its own module, which can cause issues with things like conditional reveals. Add an example of this to the review app, so that we can test that everything works as expected.
We have an open issue to provide examples of grouping radios and checkboxes under headings (#1079). Whilst we don’t provide any guidance on this at the minute, we’ve previously suggested that users can achieve this by making multiple calls to the `govukCheckboxes` macro and grouping them together inside a single call to `govukFieldset`. However, this means that each ‘set’ of checkboxes is inside its own module, which can cause issues with things like conditional reveals. Add an example of this to the review app, so that we can test that everything works as expected.
We have an open issue to provide examples of grouping radios and checkboxes under headings (#1079). Whilst we don’t provide any guidance on this at the minute, we’ve previously suggested that users can achieve this by making multiple calls to the `govukCheckboxes` macro and grouping them together inside a single call to `govukFieldset`. However, this means that each ‘set’ of checkboxes is inside its own module, which can cause issues with things like conditional reveals. Add an example of this to the review app, so that we can test that everything works as expected.
Is there anything left to do to close this issue? If the missing piece of the puzzle is to document this in the Design System, I think we should close this and open a new issue in the Design System repo instead? |
@36degrees I don't think there's any way to group radios or checkboxes in the design system is there? Not that I'm aware of using the macros at least. I think the need is to investigate the technical options and extend the macro to support them (if appropriate). |
You can create sets of radios that are not enclosed in a fieldset by not setting the |
@36degrees would you then manually add an appropriate label for each? Presumably legends aren't appropriate. I think it would be nice if the macros supported this - but if that's not wanted and there's a manual solution - yeah this could be moved to the Design system repo to add an example / guidance for how to do this. |
I was recently looking into a situation where I needed to add radio selections for the user to choose a time slot either AM or PM over the span of four days. So eight options. There might be situations where some slots would no longer be available. I'll post the examples of the journey just for reference and prosperity. This option seemed the best for accessibility but was lengthy when scrolling or reading. The next option was to align the options in a row rather than the previous column. Then looking at grouping the sections to make it visually better, but the would cause problems with the accessible code and screen readers. So finally, rolling back a bit, looking into the best patterns, clear text content and easy for screen readers and enlarging text. This was the final solution: You can see the journey in the conversation over on the Slack channel here - https://ukgovernmentdigital.slack.com/archives/C062GAGLW/p1726667981698609 |
Uh oh! @Sulcalibur, the image you shared is missing helpful alt text. Check #1079 (comment). Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image. Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.
|
Hi.
I'm wondering how best to support radio buttons (and checkboxes) which have sub-groups with headings?
Currently, you can use multiple
govukRadios
macros which share the samename
attribute, however because they use adata-module
attribute to scope the conditional reveals, these don't work properly across the groups.Alternatively, you can using a single macro and put headings in using
divider
s, but these don't currently support HTML markup.On a related not, it's unclear whether the best output would be nested
<fieldset>
s with<legend>
s, or a single<fieldset>
with headings and either aria attributes or visually-hidden prefixes to associate labels with their headings.The text was updated successfully, but these errors were encountered: