WebAIM - Web Accessibility In Mind

E-mail List Archives

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

for

From: Mallory
Date: Jan 17, 2020 4:31PM

I'm glad Graham tested the labels. I'm always recommending the for-id setup (mostly just for Dragon, and yes that's a Dragon bug) but that TB on Android doesn't like wrapping labels... was this def TB and not Voice Assistant? (I'm not sure the difference myself)

cheers,
_mallory

On Fri, Jan 17, 2020, at 4:38 PM, Brian Lovely via WebAIM-Forum wrote:
> Graham, thanks for catching that extra hyphen in aria-labelledby. I'm going
> to stop pointing out things I missed now; we'll be here all day.
> ---------- Forwarded message ---------
> From: Brian Lovely < <EMAIL REMOVED> >
> Date: Fri, Jan 17, 2020 at 10:36 AM
> Subject: Re: [External Sender] Re: [WebAIM] Radio group without legend and
> fieldset
> To: WebAIM Discussion List < <EMAIL REMOVED> >
>
>
> 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
>
>
> --
> *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.
>
>
>
> > > > >