Extend support for aria-expanded to the radio role

[36degrees]

This issue follows on from a previous discussion in #1277.

The current working draft of ARIA 1.2 extends support for aria-expanded to the checkbox role, but not the radio role. We'd like to propose that it should be extended to the radio role as well.

Overview

The radio and checkbox components in the GOV.UK Design System both support conditionally revealing additional controls, for example a text input, based on the checked state of a radio or checkbox.

For example, take the question "How do you want to be contacted?" If a user selects Email, you can ask for their email address.

As noted in the ARIA documentation for aria-expanded, 'simplifying the user interface by collapsing sections may improve usability for all, including those with cognitive or developmental disabilities.'

We use aria-expanded as part of the implementation for both radio buttons and checkboxes. This is because, despite being invalid according to ARIA 1.0, it still has good support in current assistive technologies (as documented below). We also believe that it improves the experience for screen reader users because it:

• makes the behaviour more predictable, as the user is notified that interacting with the control will reveal, or expand, something else on the page
• notifies the user of the change in the page when it happens, as the user interacts with the control

Current support for aria-expanded on radios and checkboxes

To find out what support currently exists for aria-expanded, we tested different combinations of assistive technologies and browsers.

Almost all of the combinations either partly or fully supported aria-expanded on checkboxes. The only exception was Voiceover / Safari on macOS.

Currently, there is less overall support for aria-expanded on radios. However, all of the combinations that do not support it involve Chrome. As far as we can tell, this is because Chrome strictly exposes the expanded state only when it's valid for the role, based on ARIA 1.2.

So, if ARIA was updated to allow aria-expanded on radios, and Chrome was then updated accordingly, we'd expect to see support for aria-expanded on radios to be as good as, or better than, on checkboxes.

Note: None of us are day-to-day screen reader users. On desktop, testing involved navigating to the radio / checkbox control using the tab key. On mobile, testing involved swiping through the elements on the screen to reach the control. Please let me know if there are other methods of navigation we need to consider.

Overview

Assistive technology / browser combination	Checkboxes	Radios
Voiceover / Safari (macOS Catalina)	❌	✅
NVDA 2020.3 / Firefox 81	✅	✅  [1]
JAWS 2020 / IE 11	❎  [2]	✅
NVDA 2020.3 / Chrome 86	✅	❌
JAWS 2020 / Chrome	❎  [3]	❌
Talkback / Chrome 86 (Android 10)	❎  [4]	❌
Voiceover / Safari (iOS 14)	✅	✅  [5]

Show full testing output

Checkboxes

Behaviour	Announces collapsed state on focus	Announces expanded state on focus	Announces expanded state when checked
Voiceover / Safari (macOS Catalina)	❌ "Email, unticked, tickbox, How would you like to be contacted? How would you like to be contacted? Group. Select all options that are relevant to you. You are currently on a tickbox. To select or deselect the tickbox, press Control-Option-Space"	❌ "Email, unticked, tickbox, How would you like to be contacted? Select all options that are relevant to you. You are currently on a tickbox. To select or deselect the tickbox, press Control-Option-Space"	❌ "Email, ticked, tickbox"
NVDA 2020.3 / Firefox 81	✅ Email check box not checked collapsed	✅ Email check box checked expanded	✅ "checked expanded"
JAWS 2020 / IE 11	❌ "Email checkbox not checked. To check press spacebar."	❌ "Email checkbox checked. To clear checkmark press spacebar."	⚠️ "Space, checked collapsed, checked expanded, Email checkbox checked. To clear checkmark press spacebar."
JAWS 2020 / Chrome	❌ "Email checkbox not checked. To check press spacebar."	❌ "Email checkbox checked. To clear checkmark press spacebar."	✅ Space, checked expanded
NVDA 2020.3 / Chrome 86	✅ Clickable Email check box not checked collapsed	✅ Email check box checked expanded	✅ "checked expanded"
Talkback / Chrome 71 (Android 7.0)	❌ Not ticked, email, tickbox. Double tap to toggle.	❌ Ticked, email, tickbox. Double tap to toggle.	❌ Ticked
Talkback / Chrome 86 (Android 10)	✅ Collapsed, not checked, email, tickbox.	✅ Expanded, checked, email, tickbox.	❌ Checked
Voiceover / Safari (iOS 14)	✅ Email, tickbox, unticked, collapsed. Select all options that are relevant to you. Double tap to toggle setting.	✅ Email, tickbox, ticked, expanded. Select all options that are relevant to you. Double tap to toggle setting.	✅ Expanded, ticked

Radios

Behaviour	Announces collapsed state on focus	Announces expanded state on focus	Announces expanded state when checked	Announces expanded state when changed
Voiceover / Safari (macOS Catalina)	✅ "Email, collapsed, radio button, 1 of 3, How would you prefer to be contacted? How would you prefer to be contacted?, group. Select one option. You are currently on a radio button, 1 of 3. To select this option, press Control-Option-Space"	✅ "Email, selected expanded, radio button, 1 of 3, How would you prefer to be contacted? How would you prefer to be contacted?, group. Select one option. You are currently on a radio button, 1 of 3. To select this option, press Control-Option-Space"	✅ "Email, selected expanded, radio button, 1 of 3"	✅ Moving focus moves selection: "Phone, selected expanded, radio button, 2 of 3. Select one option. You are currently on a radio button, 2 of 3. To select this option, press Control-Option-Space"
NVDA 2020.3 / Firefox 81	✅ Email radio button not checked collapsed 1 of 3	✅ Email radio button checked expanded 1 of 3	✅ space checked expanded	✅❓ "collapsed phone radio button checked expanded 2 of 3"
JAWS 2020 / IE 11	✅ Email radio button not checked collapsed	✅ Email radio button checked expanded	✅ Space, email radio button checked expanded, email radio button checked expanded	❌ "Phone, radio button checked, to change the selection press up or down arrow"
JAWS 2020 / Chrome	❌ Email radio button not checked 1 of 3	❌ Email radio button checked 1 of 3	❌ Space, email radio button checked, 1 of 3	❌ "Phone, radio button checked, 2 of 3"
NVDA 2020.3 / Chrome 86	❌ Email radio button not checked 1 of 3	❌ Email radio button checked 1 of 3	❌ space checked	❌ Phone radio button checked 2 of 3
Talkback / Chrome 71 (Android 7.0)	❌ Not ticked, email, radio button. Double tap to toggle.	❌ Ticked, phone, radio button. Double tap to toggle.	❌ Ticked.	❌ Not ticked, phone, radio button. Double tap to toggle.
Talkback / Chrome 86 (Android 10)	❌ Not selected, email, radio button	❌ Selected, email, radio button	❌ Selected.	❌ Not selected, phone, radio button.
Voiceover / Safari (iOS 14)	✅ Email, radio button, unticked, 1 of 3, collapsed. Select one option. Double tap to expand.	⚠️ Email, radio button, ticked, 1 of 3, expanded. Select one option. Double tap to collapse.	✅ Expanded, ticked	✅ On focus: Phone, radio button, unticked, 2 of 3, collapsed. Select one option. Double tap to expand. On selection: Expanded, ticked

Key

• ✅   Supports aria-expanded – the expanded state is announced when focusing the radio / checkbox control, and is also announced when the control is checked or unchecked and the expanded state changes.

• ❎   Partial support for aria-expanded – the expanded state is announced when focusing the radio / checkbox control, or announced when the control is checked or unchecked and the expanded state changes, but not both.

• ❌   No support for aria-expanded – the expanded state is never announced.

Notes

[1] Possibly confusing announcement when you change which radio button is selected:

"collapsed phone radio button checked expanded 2 of 3."

[2] Announces expanded state on selection, but not on focus. Makes a contradictory announcement when doing so:

"Space, checked collapsed, checked expanded, Email checkbox checked. To clear checkmark press spacebar."

[3] Announces expanded state on selection, but not on focus.

[4] Announces expanded state on focus, but not on selection.

[5] Makes a confusing announcement when announcing the expanded state on a radio:

"Email, radio button, ticked, 1 of 3, expanded. Select one option. Double tap to collapse."

You cannot de-select a radio button, so double tapping does not collapse the reveal.

Understanding of the expanded attribute on a radio or checkbox

When users encounter the 'expanded' or 'collapsed' state on a radio or checkbox, we need to be confident that they will understand what it means.

GOV.UK has used conditional reveals, including the use of aria-expanded, since at least November 2014. At that time, we added them to our previous frontend framework, GOV.UK Elements.

GOV.UK service teams are required to make sure everyone can use the service. This should include carrying out research with participants who represent the service's potential audience, including people with access needs.

We are only aware of a handful of issues relating to conditional reveals since November 2014. The issues that have come up are usually about the revealed fields' position in the tab order, rather than the use of aria-expanded.

However, we know that service teams will be focusing on the broader service-interactions and may not spot issues with conditional reveals. So, in December 2020, we carried out a round of user research with a focus on conditional reveals.

Findings from user research around conditional reveals

We tested a prototype of a GOV.UK service with 8 participants, 3 of whom used screen readers:

• P1, who was severely sight-impaired and used VoiceOver on macOS as their primary way of perceiving and navigating the page
• P3, who was severely sight-impaired and relied heavily on their screen reader – "If I have to do anything with my eyes I can't do it, maybe a couple of words but then get a big headache and get tired, so I use speech synthesizers when I'm doing anything on the computer."
• P5, who had retinoblastoma, is totalyl blind and uses NVDA as their primary way of perceiving and navigating the page

We included 2 different examples of conditional reveals as part of the journey that all participants completed.

Conditional reveal #1 used radios and included multiple revealed fields, as we know that designers are using conditional reveals to reveal increasingly complex additional content.

Conditional reveal #2 used checkboxes, with each checkbox revealing a single field.

P1 was disorientated by the position of the revealed fields between the two radio buttons. However, they were still able to complete the task. We are looking at the position of the revealed fields as a separate but related issue.

P5 called out the announcement of the expanded state and found it helpful:

Screen reader: "Contact checkbox not checked collapsed email…"

[checks checkbox]

Screen reader: "checked expanded, checked expanded, email address, edit, email address, edit blank"

"And that's good yeah, it said expanded, so I knew that once I ticked that box other stuff was going to change on the screen because of what I had ticked."

Further context on conditional reveals

Previous related discussions:

• aXe claims "severe" a11y error on conditional content blocks (April 2017)
• ARIA attributes set by GOVUK.ShowHideContent are invalid (June 2017)
• Checkboxes and radios that conditionally reveal content use aria-expanded which is not a valid aria-attribute for those roles (September 2018)

Examples of similar interactions outside of GOV.UK

GitHub

When committing changes to a file, selecting the ‘Create a new branch for this commit…’ radio button reveals a text input for the branch name

WordPress

For ‘Your homepage displays’, choosing ‘A static page’ reveals additional select menus to choose which page should be used.

For ‘Primary color’, selecting ‘Primary color’ reveals a color picker control

Barclays Bank

Checking the radios for ‘Current/savings account’ and ‘Mortgage account’ toggles the visibility of associated form fields. (Register for Online Banking > Start > scroll to Account details)

Royal Bank of Scotland

‘Customer number’ and ‘Card number’ toggle the visibility of single form fields. (Log in)

Each radio toggles the visibility of a large number of associated form fields. (Set up digital banking)

Chrome

In Chrome preferences, for ‘On start-up’ selecting ‘Open a specific page or set of pages’ reveals additional controls to specify which pages should open on start up.

macOS display preferences pane

Selecting a ‘Scaled’ resolution reveals additional controls to allow the user to choose how the display should be scaled – to optimise for larger text or for more space.

In other design systems

• Babylon DNA
• Carbon Design System
• CMS Design System (healthcare.gov)
• GitHub Primer
• NHS Design System – based on GOV.UK's implementation
• PatternFly (Red Hat)
• Polaris (Shopify) – select 'Single-choice or multi-choice list with children content (only rendered when choice is selected)' from the 'Examples' drop down
• University of St Andrews Digital Pattern Library

---

Thanks to the rest of the GOV.UK Design System team, especially @EoinShaughnessy, for all of their work on this and for their help writing this issue up.