WebAIM - Web Accessibility In Mind

E-mail List Archives

Re: [External Sender]Radio group without legend and fieldset

for

From: Brian Lovely
Date: Jan 17, 2020 8:36AM

Darn it, I missed something, Sudheer. For radio buttons, use
role="radiogroup". All other groups use just role="group".

On Fri, Jan 17, 2020 at 10:08 AM Graham Armfield <
<EMAIL REMOVED> > wrote:

> 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 <
> https://urldefense.com/v3/__http://www.coolfields.co.uk/__;!!EFVe01R3CjU!OA3vFvhHemzMGOX9dh0rWxuEuhWR5lbpfTzgbY-YvcTB_JZfgL84jX_YZ14aoT2-do6HPA$
> >
> M:07905 590026
> T: 01483 856613
> @coolfields <
> https://urldefense.com/v3/__https://twitter.com/coolfields__;!!EFVe01R3CjU!OA3vFvhHemzMGOX9dh0rWxuEuhWR5lbpfTzgbY-YvcTB_JZfgL84jX_YZ14aoT1PeYYs-Q$
> >
>
>
> 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>
> > > > > https://urldefense.com/v3/__http://list.webaim.org/__;!!EFVe01R3CjU!OA3vFvhHemzMGOX9dh0rWxuEuhWR5lbpfTzgbY-YvcTB_JZfgL84jX_YZ14aoT3GnyM0ow$
> > List archives at
> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!!EFVe01R3CjU!OA3vFvhHemzMGOX9dh0rWxuEuhWR5lbpfTzgbY-YvcTB_JZfgL84jX_YZ14aoT3NlkBoFA$
> > > >
> > > https://urldefense.com/v3/__http://list.webaim.org/__;!!EFVe01R3CjU!OA3vFvhHemzMGOX9dh0rWxuEuhWR5lbpfTzgbY-YvcTB_JZfgL84jX_YZ14aoT3GnyM0ow$
> List archives at
> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!!EFVe01R3CjU!OA3vFvhHemzMGOX9dh0rWxuEuhWR5lbpfTzgbY-YvcTB_JZfgL84jX_YZ14aoT3NlkBoFA$
> >


--
*Brian Lovely*
Capital One Digital Accessibility
804.389.1064




The information contained in this e-mail is confidential and/or proprietary to Capital One and/or its affiliates and may only be used solely in performance of work or services for Capital One. The information transmitted herewith is intended only for use by the individual or entity to which it is addressed. If the reader of this message is not the intended recipient, you are hereby notified that any review, retransmission, dissemination, distribution, copying or other use of, or taking of any action in reliance upon this information is strictly prohibited. If you have received this communication in error, please contact the sender and delete the material from your computer.