Skip to content
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

Open
Tracked by #5185
frankieroberto opened this issue Nov 23, 2018 · 25 comments · Fixed by #1497
Open
Tracked by #5185

Ability to group radio buttons / checkboxes within sub-headings #1079

frankieroberto opened this issue Nov 23, 2018 · 25 comments · Fixed by #1497
Labels

Comments

@frankieroberto
Copy link
Contributor

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
Copy link
Contributor

NickColley commented Nov 23, 2018

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

@kellylee-gds kellylee-gds added the feature request User requests a new feature label Dec 5, 2018
@hannalaakso hannalaakso added the awaiting triage Needs triaging by team label Jan 21, 2019
@edwardhorsford
Copy link
Contributor

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.

@kellylee-gds kellylee-gds added Priority: Low and removed awaiting triage Needs triaging by team labels Jan 30, 2019
@timpaul
Copy link
Contributor

timpaul commented Jan 30, 2019

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
Copy link
Contributor

Here's an example from our service - radios roughly grouped in to individuals and teams:
screenshot 2019-01-30 at 15 05 21

An older design we're not going with, but with a similar need:
screenshot 2019-01-30 at 15 06 30

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
Copy link
Contributor Author

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

screenshot 2019-01-30 at 15 12 51

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
Copy link

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

@frankieroberto
Copy link
Contributor Author

Here's a possible fix: #1163.

@colinrotherham
Copy link
Contributor

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
Copy link
Contributor

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

@colinrotherham
Copy link
Contributor

colinrotherham commented Feb 13, 2019

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
Copy link
Contributor

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

colinrotherham added a commit to colinrotherham/govuk-frontend that referenced this issue Mar 30, 2019
Adds new examples

1. Group of multiple radio fieldsets
2. Group of multiple checkbox fieldsets

Fixes alphagov#1079
colinrotherham added a commit to colinrotherham/govuk-frontend that referenced this issue Apr 1, 2019
Adds new examples

1. Group of multiple radio fieldsets
2. Group of multiple checkbox fieldsets

Fixes alphagov#1079
colinrotherham added a commit to colinrotherham/govuk-frontend that referenced this issue Apr 1, 2019
Adds new examples

1. Group of multiple radio fieldsets
2. Group of multiple checkbox fieldsets

Fixes alphagov#1079
colinrotherham added a commit to colinrotherham/govuk-frontend that referenced this issue Apr 1, 2019
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
colinrotherham added a commit to colinrotherham/govuk-frontend that referenced this issue Apr 1, 2019
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
colinrotherham added a commit to colinrotherham/govuk-frontend that referenced this issue Apr 1, 2019
Adds new examples

1. Group of multiple radio fieldsets
2. Group of multiple checkbox fieldsets

Fixes alphagov#1079
colinrotherham added a commit to colinrotherham/govuk-frontend that referenced this issue Apr 2, 2019
Adds new examples

1. Group of multiple radio fieldsets
2. Group of multiple checkbox fieldsets

Fixes alphagov#1079
@NickColley
Copy link
Contributor

NickColley commented Jul 23, 2019

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
Copy link
Contributor

I'm back looking at this page again.

Here's where it's gotten to:
Screenshot 2020-05-14 at 16 05 19

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.

@hannalaakso hannalaakso added the awaiting triage Needs triaging by team label May 14, 2020
@kellylee-gds kellylee-gds removed the awaiting triage Needs triaging by team label May 18, 2020
@christopherthomasdesign
Copy link
Member

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
Copy link
Contributor

@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 added a commit that referenced this issue Jun 18, 2021
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.
lfdebrux pushed a commit that referenced this issue Jul 30, 2021
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.
36degrees added a commit that referenced this issue Sep 27, 2021
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.
36degrees added a commit that referenced this issue Oct 5, 2021
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.
@36degrees
Copy link
Contributor

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
Copy link
Contributor

@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
Copy link
Contributor

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
Copy link
Contributor

@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
Copy link

Sulcalibur commented Sep 18, 2024

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.
Example layout number one - all the options stacked in a column

The next option was to align the options in a row rather than the previous column.
Example layout number two - all the options now in a row layout

Then looking at grouping the sections to make it visually better, but the would cause problems with the accessible code and screen readers.
Example layout number three - some more condensed design

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:
Final solution that is clear, clear and accessible

You can see the journey in the conversation over on the Slack channel here - https://ukgovernmentdigital.slack.com/archives/C062GAGLW/p1726667981698609

Copy link

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet