E-mail List Archives

Search E-mail List Archives for

Number of posts in this thread: 8 (In chronological order)

From: Sudheer Babu
Date: Fri, Jan 17 2020 6:55AM
Subject: Radio group without legend and fieldset
No previous message | Next message →

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>

From: Brian Lovely
Date: Fri, Jan 17 2020 7:27AM
Subject: Re: [External Sender] Radio group without legend and fieldset
← Previous message | Next message →

Hey Sudheer,

This is good, but there are two things:

The group element does not support label, so change the group label from a
<label> to a non-semantic container like a div or span. I know it's
confusing but "group label" does not mean an actual <label> element.

I would not trust the implicit labels on the radio buttons, I would ensure
association by using the for attribute:

<label for="radioOne">
<input id="radioOne" type="radio" name="example-radio" value="One" />
<span>One</span>
</label>

...also I'm not sure if the "value" attribute is necessary on the radio
buttons, the label should take care of that.

On Fri, Jan 17, 2020 at 8:55 AM Sudheer Babu < = EMAIL ADDRESS 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!MH1nbzetLWfeET5jGua9jCmL3eP4niaK4M40-KzKORZcTRIguJ4oKJH2IketpboYyNGuvA$
> List archives at
> https://urldefense.com/v3/__http://webaim.org/discussion/archives__;!!EFVe01R3CjU!MH1nbzetLWfeET5jGua9jCmL3eP4niaK4M40-KzKORZcTRIguJ4oKJH2IketpbqJ6txXyw$
> >


--
*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.

From: Graham Armfield
Date: Fri, Jan 17 2020 8:08AM
Subject: Re: Radio group without legend and fieldset
← Previous message | Next message →

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 ADDRESS 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>
> > > > >

From: Brian Lovely
Date: Fri, Jan 17 2020 8:36AM
Subject: Re: [External Sender]Radio group without legend and fieldset
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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.

From: Brian Lovely
Date: Fri, Jan 17 2020 8:38AM
Subject: Re: Fwd: [External Sender]Radio group without legend and fieldset
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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.

From: Mallory
Date: Fri, Jan 17 2020 4:31PM
Subject: Re: Fwd: [External Sender]Radio group without legend and fieldset
← Previous message | Next message →

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 ADDRESS 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 ADDRESS 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 ADDRESS 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 ADDRESS 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.
>
>
>
> > > > >

From: Graham Armfield
Date: Sun, Jan 19 2020 12:39PM
Subject: Re: Fwd: [External Sender]Radio group without legend and fieldset
← Previous message | Next message →

Hi Mallory,

It was definitely Talkback. I have a Samsung phone so Talkback is not
installed by default, so I have installed the Android Accessibility Suite
which includes Talkback.

Voice Assistant is the native Samsung screen reader that does come
pre-installed on Samsung phones (I think that's still true).

In side-by-side tests, they are broadly the same, but Voice Assistant
doesn't seem to always give all the information that Talkback does.

Regards
Graham Armfield
Coolfields Consulting

From: Sudheer Babu
Date: Mon, Jan 20 2020 6:01AM
Subject: Re: Fwd: [External Sender]Radio group without legend and fieldset
← Previous message | No next message

that aria-labelledby was a typo :(
really great inputs from you all!

thanks @Graham, @Brian, @Mallory - totally appreciate it.

On Mon, Jan 20, 2020 at 1:09 AM Graham Armfield <
= EMAIL ADDRESS REMOVED = > wrote:

> Hi Mallory,
>
> It was definitely Talkback. I have a Samsung phone so Talkback is not
> installed by default, so I have installed the Android Accessibility Suite
> which includes Talkback.
>
> Voice Assistant is the native Samsung screen reader that does come
> pre-installed on Samsung phones (I think that's still true).
>
> In side-by-side tests, they are broadly the same, but Voice Assistant
> doesn't seem to always give all the information that Talkback does.
>
> Regards
> Graham Armfield
> Coolfields Consulting
> > > > >