Issue Summary
On the "Log in | user" page, The "I have forgotten user name" and "I have forgotten password" radio buttons are not programmatically grouped (that becomes available on activating "forgotten password" link).
Steps to Reproduce
- Navigate onto the above mentioned page.
- Navigate to the "forgotten password" link and activate it.
- Navigate onto the mentioned radio buttons using screen reader.
- Observe that no group is announced for it.
Screenshot
Actual Result
The radio buttons such as "I have forgotten user name" and "I have forgotten password" are not programmatically grouped and associated with "What is preventing you from logging in?" instruction. As a result it will create bad user experience for screen reader users. Moreover incomplete information is conveyed for them.
Expected result
The screen reader should announce the instruction along with the label for the radio buttons. in this instance, Include the instruction "What is preventing you from logging in?" within <legend> element. Use <fieldset>and <legend> elements to group the instruction and radio buttons.
Code snippet
<fieldset>
<legend>What is preventing you from logging in?</legend>
<label ..>
< input type="radio"...>
<div>I have forgotten password</div>
</label>
<label ..>
<input type="radio"..>
<div>I have forgotten user name</div>
</label>
</fieldset>
workaround
Currently there is no known workaround for this behavior. A workaround will be added here when available
Environment
MacBook Pro (14-inch, 2021)
macOs Ventura 13.5
Chrome - Version 115.0.5790.114 (Official Build) (x86_64)
Firefox- Version 93.0 (32-bit)
Safari- Version 15.3 (17612.4.9.1.5)
JAWS- Version 2023
NVDA- Version 2023.2
Voiceover - Version Latest
Bug
Low
