Legend (and hint and error message) for the group of radios / checkboxes announced when focusing a conditionally revealed field whilst using VoiceOver

[36degrees]

Conditionally revealed controls are inside the <fieldset> that wraps the radios / checkboxes.

This could potentially cause confusion, as in VoiceOver the legend (and any other text associated with the fieldset using aria-describedby, such as a hint or error message) is read out when focusing the conditionally revealed content.

For example, when focusing the conditionally revealed 'email address' field in the example from the Design System (above), Voiceover with Safari (14) on macOS (10.15.7) announces:

"Email address, edit text, How would you like to be contacted? Select all options that are relevant to you. You are currently on a text field. To enter text in this field, type."

The hint text "Select all options that are relevant to you" applies to the set of checkboxes, and does not make sense in the context of the email address field.

[36degrees]

Testing with the list of assistive technology / browser combinations in the service manual (plus NVDA / Chrome and JAWS / IE as the next most popular desktop screen reader combinations according to the most recent WebAIM screen reader survey) this seems to mostly affect Voiceover, at least in terms of the way the legend is read out.

No other screen reader read out the legend from the parent fieldset when focusing the text field (at least as tested with the default settings).

Show full testing output

Assistive technology / browser combination	Result
JAWS 2020 / Chrome	✅ Email address, edit, type of text
NVDA 2020.3 / Firefox 81	✅ Email address edit has autocomplete blank
NVDA 2020.3 / Chrome 86	✅ Email address edit blank
JAWS 2020 / IE 11	✅ Email address, edit, type of text
Voiceover / Safari (macOS Catalina)	❌ "Email address, edit text, How would you like to be contacted? Select all options that are relevant to you. You are currently on a text field. To enter text in this field, type."
Voiceover / Safari (iOS 14)	❌ Email address, text field, Select all options that are relevant to you. Double tap to edit.
Talkback / Chrome 71 (Android 7)	✅ Email address edit box. Double tap to enter text.

[36degrees]

I've updated the title and description to focus on the behaviour rather than the implementation, and the fact that it mostly seems to affect VoiceOver.