Desk research into whether other teams have tried to solve issues with conditional reveals

[kellylee-gds]

What

Desk research into whether other teams outside of government have solved some of the issues we have with conditional reveals.

For example:

• are there any discussions around how to make this pattern accessible in e.g. the WCAG or ARIA repos?
• how are similar 'conditional reveals' implemented in other websites, apps, operating systems, and what is the experience as a screen reader user?
• there may be products and websites that do not use conditional reveals - what do they use instead?

Why

So we can learn from them.

Who needs to know about this

Developers, Designers

Further detail

Helps resolve the following issues:
#979
#1972
#1988
#1989

Done when

• Identified appropriate websites/products to research
• Identified any potential learnings

[hannalaakso]

I've started a spreadsheet to capture examples here: https://docs.google.com/spreadsheets/d/1mOdxxVyLpyrFGk4JxmBig08ua3-OO62VdXGA0oQ1ib4/edit#gid=0

[hannalaakso]

Summary of findings

• We found multiple examples of radios being used to conditionally reveal content. Some of these are included in Extend support for aria-expanded to the radio role w3c/aria#1404 as examples
• The techniques for conditionally revealing content varied between inserting the revealed markup to the DOM when a radio is interacted with, or toggling its visibility with CSS. There was no programmatic link made in the examples we looked at between the radio and the revealed content. None of the examples we saw seemed like something we could use to improve the accessibility of our component.
• @CharlotteDowns @christopherthomasdesign We thought that the examples at The Guardian and TV licensing were interesting as a design pattern since they revealed content underneath stacked radios. Also Barclays (go to 'Start' > 'Account details') although the radios are inline. There’s a question mark over whether users could miss that some content has been revealed below on mobile resolutions or if the page is zoomed in at a high resolution. But it’s a potential solution to explore for The logical order of conditionally revealed content as it appears within a set of radios or checkboxes can be confusing govuk-frontend#1988.

[terrysimpson99]

Hanna wrote:

[...] We thought that the examples at The Guardian and TV licensing were interesting as a design pattern since they revealed content underneath stacked radios. [...]

We use that pattern extensively in at least one of our services (www.gov.uk/send-rent-lease-details). It's been applied to more than just radio buttons and we're now trying to design it out. I saw the request for examples but didn't report it previously because I thought the scope was limited to revealing content as part of the radio button group. In addition to the questions raised by Hanna, I'd suggest guidance should include a caution against using conditional reveal. The user experience of a GDS page is WYSIWYG but conditional reveal can make it feel unstable. Within the team, I've used the term 'rabbits out of a hat' but I'm sure somebody else can encapsulate it better. I'd be happy to demonstrate it to anyone. I enclose images:

[hannalaakso]

Thanks @terrysimpson99 👍 I'm going to close this card. Would you like to add your comment to alphagov/govuk-frontend#1988 so that it doesn't get lost? Or I can do it on your behalf.

[hannalaakso]

@terrysimpson99 Apologies, I have a couple more questions. Have you seen any evidence that users are struggling with this pattern where the revealed content is below the radios? Or what made you decide to to remove it from your service? What did you replace it with?

[terrysimpson99]

Re: users struggling. I don't have any evidence that users struggle without outside reveal per se. Users face challenges for 'within' and 'outside' reveals but they appear to manage with both. But the design below might give you a clue as to what is being done with reveals and it isn't something I would recommend. When the reveal is a long way from the selection, there is a visual disconnect (for sighted users), cognitive disconnect, and even a time-domain disconnect in our case.

The example below is where a text area has appeared as a result of a 'Yes' selection but four questions prior. Users sometimes get to the field and don't know what it relates to - the ones I've seen do that eventually work it out so it's not a show-stopper but it's not great. That seems to me to be a bad implementation of reveal rather than reveal itself. The service has just gone berserk with reveals so I'd welcome some caution expressed in guidance. The decision to remove them was partly due to a move to one-thing-per-page when most reveals could be replaced with a question on the following page. The decision eventually got support of stakeholders when developers couldn't handle a particular feature request (such as allowing the user to add & remove addresses) due to the complexity of the page with embedded reveals. We haven't implemented the new design yet.

[hannalaakso]

@terrysimpson99 Thanks so much for sharing these, it's really useful information 👍 I think you're right that in the example you share it's quite hard to understand which particular question revealed the content. I've linked to your comments from alphagov/govuk-frontend#1988 as I'm going to close this card.