WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: Radio group without legend and fieldset

for

From: Graham Armfield
Date: Jan 17, 2020 8:08AM

Hi Sudheer, interesting idea.

To first answer your question re Wave and aXe:
In Wave, there are two Alerts - one for the orphaned 'Choices' label, and
one for the lack of a <fieldset> and <legend>.

In aXe, there is only one issue logged - that the ARIA attribute is not
valid - it's aria-labelledby, not aria-labelled-by as in your example.
Correcting this means that aXe doesn't report any issues.

Next, I'm testing the revised version with a screen reader - NVDA 2019.2.1
with Firefox 72.0.1 on Windows 10.

NVDA does announce "Choices grouping" and the individual radio button
labels and whether they are checked or not.

I don't have a bang up-to-date copy of JAWS but in Version 18 running with
IE11 I also get all the information I'd need to make an informed choice.

Finally I tested a test page on my Android phone running Talkback. The lack
of the explicit link between the radio buttons and their labels causes an
issue here - the label is not read out when Talkback focuses on the radio
buttons. When corrected in my example the label was associated
successfully. The 'Choices' was read out in the same way that a <legend>
would be.

So, after attending to those two issues (ARIA attribute, and explicit
linking on labels), it would seem to offer screen reader users all the
necessary information.

I don't have an iOS device handy so can't test on that though.

Regards
Graham Armfield

coolfields.co.uk <http://www.coolfields.co.uk/>;
M:07905 590026
T: 01483 856613
@coolfields <https://twitter.com/coolfields>


On Fri, 17 Jan 2020 at 13:55, Sudheer Babu < <EMAIL REMOVED> > wrote:

> Hi All,
>
> Can you please check the below code and let me know if the implementation
> for the radio group is proper without the legend and fieldset and also if
> it pops up any error via tools like axe/wave.
>
> Thanks!
>
> <div role="group" aria-labelled-by="exampleId">
> <label id="exampleId">Choices</label>
> <label>
> <input type="radio" name="example-radio" value="One" />
> <span>One</span>
> </label>
> <label>
> <input type="radio" name="example-radio" value="Two" />
> <span>Two</span>
> </label>
> </div>
> > > > >