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. https://github.com/alphagov/govuk-frontend/pull/1163 For nested radio components, maybe checkboxes too
2. https://github.com/alphagov/govuk-frontend/issues/1166 To extend the wrapping fieldset

[timpaul]

Thanks everyone for the ideas and examples.

Does anyone have any evidence either way regarding the usability of grouped radios?

One concern we have is that some users might assume that the groups work independently of each other. They would go down the list selecting an option from each group in the mistaken belief that that's what would be submitted, when in fact only their last choice would be.

[colinrotherham]

Hi @timpaul, we have a single question with a long list of checkboxes.

We use the subheadings to break them up into logical groups, making them easier to read.

Can't offer any evidence for radio buttons though sorry.

[edwardhorsford]

I've not observed any issues, but we've not had many users go through this. I can see the concern - but I think the context in which the labels are used (inc not having them phrased as questions) should make it clear what they're doing.

[frankieroberto]

We've spoken to the ONS, who used a version of the grouped radio buttons with subheadings in an early test, and they did experience some users who assumed that each heading was independent, and that they had to select one option from each sub-group. They weren't using the Design System typography though but their own styles.

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