Ability to group radio buttons / checkboxes within sub-headings

[frankieroberto]

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 same name attribute, however because they use a data-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 dividers, 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.

[NickColley]

I spoke to Frankie and we put together a coded example: https://tricky-fisher.glitch.me/

[edwardhorsford]

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.

[timpaul]

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!

[edwardhorsford]

Here's an example from our service - radios roughly grouped in to individuals and teams:

An older design we're not going with, but with a similar need:

For the first example, I don't think it's essential for 'teams' to be programmatically linked to the options. For the second it does, or the options would need hidden text to make the team they apply to clear.

[frankieroberto]

@timpaul here's the example from the pattern I was looking at:

I used two govukRadios macros with the same name, which is fine for the radios (and would probably work for @edwardhorsford's examples) but the conditional reveals don’t work properly because they're scoped to the data-module. I think that this could be fixed by scoping the conditional reveals to the whole page (as the name attributes have page-scope anyhow).

[stevenaproctor]

@timpaul I do not have any examples from HMRC. I will ask in our working group.

[frankieroberto]

Here's a possible fix: #1163.

[colinrotherham]

I've been working on this too so thought I'd share my examples:

1. Multiple fieldsets of checkboxes with legends
https://seemly-airmail.glitch.me

2. Multiple fieldsets of checkboxes with legends
With aria-describedby on nested fieldsets
https://childlike-cinema.glitch.me/

3. Single fieldset of checkboxes with subheadings
https://steep-knife.glitch.me

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.

[NickColley]

@colinrotherham how did you get on with screen reader testing?

[colinrotherham]

We initially tested version 1 versus 3 and found 3 worked best, but this was thanks to the aria-describedby attribute making VoiceOver read out the headings as you move from input to input.

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
https://twitter.com/colinrotherham/status/1091302018898112513

See the caveats around only using simple cases like this for nested fieldsets.

[colinrotherham]

We could reproduce version 2 via govuk-frontend but we'd need to solve:

1. Trigger setAttributes on all radio inputs #1163 For nested radio components, maybe checkboxes too
2. Make it easier to add a hint or an error message to a fieldset #1166 To extend the wrapping fieldset

[NickColley]

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.

[edwardhorsford]

I'm back looking at this page again.

Here's where it's gotten to:

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.

[christopherthomasdesign]

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.

[edwardhorsford]

@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.

[36degrees]

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?

[edwardhorsford]

@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).

[36degrees]

You can create sets of radios that are not enclosed in a fieldset by not setting the fieldset option and then manually wrap the multiple sets in a fieldset using the govukFieldset macro. So it's possible to achieve using the macros, but we don't provide a pre-defined method for doing it.

[edwardhorsford]

@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.

[Sulcalibur]

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

[github-actions]

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.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.