search

dwp / design-system

One place for service teams to find and share the styles, components and patterns for designing DWP services.
MIT License
15 stars 3 forks source link

Radio Button - Conditional reveal on inline radios #433

Closed RossDBrown closed 2 years ago

RossDBrown commented 2 years ago

Radio Button - Conditional reveal on inline radios

Conditional reveals on radio buttons are a standard pattern in the prototype kit, but not available for inline (horizontal) radio buttons.

Why

This component is being used in live services - for example, Universal Credit. It is useful in a journey where a user may be asked to add conditional information many times in a journey. When asking about 'other' income, the UC journey asks 6 questions which will require conditional further information if a user answers 'yes'. I believe this is expected to expand. Hopefully the UC team responsible can add further context.

Anything else

I hacked it in the prototype kit by manipulating existing patterns, forcing line breaks and adding css to override the indentation of the current pattern.

Screen Shot 2022-01-05 at 10 37 59

Screen Shot 2022-01-05 at 10 38 09

Screen Shot 2022-01-05 at 10 42 53

Screen Shot 2022-01-05 at 10 43 26

jonhurrell commented 2 years ago

Thanks for taking the time to raise this @RossDBrown.

We need to explore accessibility concerns of doing this vs moving the conditional question to the next page and having the initial question replayed either in hint or a hybrid statement/question. Conditional reveals are charged with a11y concerns (https://accessibility.blog.gov.uk/2021/09/21/an-update-on-the-accessibility-of-conditionally-revealed-questions/). We've asked @abbott567 @jon-houghton for their input, but what you've outlined is in use across services and good discussion point.

jonhurrell commented 2 years ago

@RossDBrown A late update on this. The ability to conditionally reveal on inline radios used to be an option in GOV.UK Elements, way before the design system. GDS removed this because of the problems it caused when mis-used. @abbott567 had this take on the a11y concerns on conditional reveals:

…from an accessibility point of view, conditional reveals are currently a fail on WCAG 2.1 due to the way GDS have tagged them up. They use aria attributes on elements which is not allowed in the HTML5 spec. It seems to work, but its technically a fail on 4.1.2 Name, Role, Value: Radios – GOV.UK Design System (design-system.service.gov.uk)

Conditional reveals add a layer of complexity which is often confusing. We should really discourage designers from using them unless absolutely essential, particularly if there they are revealing more than a single field. Multiple fields being revealed causes big issues for screen reader users: The logical order of conditionally revealed content as it appears within a set of radios or checkboxes can be confusing · Issue #1988 · alphagov/govuk-frontend · GitHub

Your example is considerate, but we need to err on the side of caution with this one based on what we've seen in the past. If we add a component to make it easy for people to do this, they may well introduce barriers to their service for users.

We really appreciate the contribution and time you spent documenting it.